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第 1 章 物体 的 运动 
1.1 让 物体 沿 水 平方 向 运动 
1.2 ”通过 键盘 控制 物体 的 运动 


第 6 章 


”实现 带 
5 【[ 进 阶 绘制 大 幅度 弯曲 的 曲线 时 的 难点 


让 物体 沿 任意 方向 运动 

在 物体 运动 中 加 入 重力 
物体 随机 飞溅 运动 

让 物体 进行 圆周 运动 

[ 进 阶 ] 微分 方程 式 及 其 数值 解 尘 
卷 动 

将 背景 从 一 端 卷 动 到 另 一 端 

让 背景 卷 动 与 角色 的 运动 产生 联动 
卷 动 由 地 图 块 组 合 的 地 图 
波纹 式 的 摇摆 卷 动 
制作 有 纵深 感 的 卷 动 

[ 进 阶 ] 透视 理论 

碰撞 检测 

长 方形 物体 间 的 碰撞 检测 
圆 形 与 圆 形 、 圆 形 与 长 方形 物体 间 的 碰撞 检测 
细 长 形 物体 与 圆 形 物体 间 的 碰撞 检测 
扇形 物体 的 碰撞 检测 

[ 进 阶 ] 3D 的 碰撞 检测 

光线 的 制作 


.1 让 物体 向 任意 方向 旋转 ( 含 缩放 效果 ) 
”任意 两 点 间 的 光线 投射 
3 ”光线 弯曲 处 理 


追踪 效果 的 激光 


画面 切换 效果 

水 平 扫描 式 画面 切换 

斜 向 扫描 式 画面 切换 
ee 全 全 汪 
使 用 贺 形 进行 画面 切换 
雨刷 式 画 面 切 换 
[ 进 阶 ] 多 种 多 样 的 画面 切换 方法 
游戏 开发 的 数学 和 物理 学 基础 理论 


6.1 比例 、 一 次 函数 及 直线 方程 
6.2 ”算式 展开 与 因 式 分 解 
6.3 二 次 函数 、 二 次 方程 与 抛物 线 : 圆 
6.4 三 角 画 数 
6.5 问 量 与 矩阵 
6.6 ”微分 
6.7 ”级 数 与 积分 
附录 “示例 程序 的 编译 及 运行 方法 一 一 基于 Visual Studio 2013、Visual Studio 
2012、Visual Studio 2010 


译 者 序 


提 到 物理 和 数学 ， 尤 其 是 高 等 数学 时 ， 想 必 多 数 人 的 第 一 反应 都 是 “好 难 ” 吧 。 
Wa ts 在 看 到 如 同 天 书 一 般 的 物理 数学 公式 时 ， 大 都 会 望 而 却 

A a 归纳 为 “科学 家 ” 才 会 
研究 的 可 上 从 而 不 自觉 地 选择 逃避 。 


仔细 想 想 ， 物 理 和 数学 真 的 很 难 吗 ? 绝 大 多 数 翻 开 这 本 书 的 朋友 ， 都 应 该 有 中 
考 、 高 考 的 经 历 ， 并 且 一 路 过 关 斩 将 应 付 过 无 数 次 物理 和 数学 考试 。 从 这 个 角 
人 “好 难 ” 只 是 一 
六 借 口 。 


那么 为 什么 我 们 会 这 村 抗拒 物理 和 数学 呢 。 从 很 多 朋友 的 肥 名 贵 来 看 大 致 可 以 归 
纳 为 两 点 : 没有 用 、 没 意思 。 比 如 大 学 的 微 积 分 课程 ， 只 会 告诉 我 们 如 何 求解 
积分 习题 ， 却 几乎 没有 提 到 积分 在 现实 世界 中 有 什么 实际 用 途 ; 再 比如 我 们 在 
| 
Vb 入 


而 在 本 书 中 ， 一 切 都 从 实例 出 发 ， 不 讲 任何 空洞 或 者 脱离 现实 的 理论 知识 

过 本 书后 ， 束 可 以 知道 积分 不 仅 可 以 用 来 做 题 ， 于 可 以 精准 地 模拟 出 饭 体 在 重 
力作 用 下 的 运动 轨迹 ， 而 原本 枯燥 的 正 态 分 布 ， 在 本 书 中 却 可 以 转换 成 火山 喷 
发 一 样 的 酪 炫 效 果 。 通 过 本 书 总 计 超过 40 个 实例 的 讲解 ， 不 仅 能 学 到 必要 的 游 
戏 开 发 知识 ， 更 重要 的 是 还 能 让 我 们 重新 认识 物理 和 数学 这 两 门 学 科 一 一 物理 
1 他 个 只 是 应 侍 考试 的 毫 无 用 处 的 纯 理 论 人 知识， 而 是 解决 很 多 实际 问题 时 
必 不 可 少 的 工 


作为 一 本 游戏 开发 的 入 门 书 ， 本 书 也 磊 具 特色 。 目 前 市 面 上 的 游戏 开发 入 门 ] 书 
大 致 可 分 为 两 种 : 一 种 好 像 葵花 至 典 这 样 的 速成 武功 ， 按 照 书 中 的 讲解 一 步 一 


步 地 操作 ， 最 后 一 般 都 能 做 出 一 个 完整 的 小 游戏 。 快 则 快 笑 ， 却 不 求 其 解 ， 很 
多 算法 原 旬 以 及 细节 都 被 一 笔 带 过 虽然 能 出 成 采 ， 却 仍然 知 其 然而 不 知 其 所 
以 然 ， 不 容易 进一步 提高 ; 另 一 种 如 同 易 筋 经 ， 偏 理论 而 不 重 实践 。 即 使 整 本 
书 看 完 ， 可 能 还 是 不 知道 从 何 入 手 才 能 做 出 一 个 完整 的 游戏 ， 入 门 时 间 太 长 。 
本 书 虽 然 在 形式 上 偏向 后 者 ， 但 古 仍 然 重 视 实战 ， 所 选择 的 案例 如 物体 移动 、 
卷 动 、 健 撞 检 测 、 画 面 切换 等 都 是 游戏 开发 中 最 基础 也 最 重要 的 组 成 部 分 ， 每 
个 案例 又 有 一 到 两 个 变形 或 进 阶 实例 ， 满 足 不 同 层次 读者 的 需要 。 因 此 如 果 有 是 
以 游戏 开发 为 职业 目标 ， 想 扎 扎 实 实地 打 好 基础 的 话 ， 本 书 将 会 征 一 个 不 错 的 


选择 。 


译 者 的 本 职工 作 侧重 于 Web 开发 ， 出 于 对 游戏 开发 的 兴趣 完成 了 本 书 的 翻译 ， 
如 书 中 存在 朴 调 之 处 ， 还 请 读者 不 音 指 出 。 


最 后 ee ee eh id 同时 也 感谢 图 灵 公 司 


SEE 


各 位 编辑 的 共同 努力 ， 才 让 本 书 得 以 面世 。 布 望 所 有 对 游戏 开发 感 兴趣 的 读者 
都 能 从 中 获 区 
徐 谦 


2014 年 10 月 14 日 


用 号 


这 在 一 本 通过 游戏 开发 实例 ， 讲 解数 学 与 物理 知识 的 书 。 数 学 与 物理 ， 两 者 都 
2 并 不 能 像 在 学 校 的 物理 
数学 课 上 那样 ， 不 管 三 先 育 下 一 堆 可 能 用 得 痢 的 公式 或 解 题 技 巧 。 真 
正 的 游戏 开发 ， 总 是 元 浊 到 -个 需 实现 的 需求 ， 然 后 再 在 寻求 实现 方法 的 过 
程 中 ， 去 学 习 必 有 要 的 数学 和 物理 知识 ， 即 * 先 有 需求 ， 再 掌握 实现 需求 的 工 
具 ”。 对 于 普通 人 来 说 ， 想 必 这 样 的 学 习 模 式 才 是 更 加 自然 并 有 效 的 吧 。 


二 以来， 数学 都 是 伴随 着 一 些 颇 具 实 用 性 的 目的 产生 并 发 展 起 来 的 。 例 如 在 
古代 ， 建 筑 中 必须 要 测算 距离 或 长 度 ， 赋 税 或 商业 活动 中 必须 计算 款项 、 面 
积 、 体 积 等 ， 数 学 正 是 在 这 些 现实 需求 中 一 步 步 发 展 起 来 的 。 而 物理 学 的 初衷 
也 是 用 算式 这 种 客观 的 语言 来 描述 身边 发 生 的 现象 ， 同 样 起 源 于 非常 实际 的 需 
求 。 因 此 ， 从 某 种 意义 上 来 说 ,“ 先 有 需求 ， 再 去 掌握 实现 需求 的 工具 ”这 种 学 
习 模 式 ， 正 是 顺应 整个 数学 和 物理 发 展 过 程 的 最 目 然 的 方式 。 


时 至 今日 ， 数 学 和 物理 已 经 经 历 过 无 数 才 华 横 洲 的 先 人 的 反复 锤炼 ， 称 它们 为 
集合 了 人 类 智慧 的 瑰宝 也 不 为 过 ， 它 们 共同 文 撑 起 了 现代 的 科学 技术 ， 当 然 也 
古 游 戏 以 及 计算 机 行业 的 基石 。 但 是 我 们 在 学 习 这 样 的 癌 茵 瑰宝 时 ， 却 往往 不 


Sh 


明日 数学 和 物理 究竟 有 什么 作用 ， 只 是 像 背 诵 视 语 一 样 强行 记 下 公式 ， 基 守 思 
有 不 少 人 对 其 感到 厌恶 。 其 实 人 的 本 性 确实 如 此 假如 不 是 对 某 样 事物 抱 有 闪 
趣 ， 或 者 迫 于 外 部 压力 ， 是 很 难 认真 地 自觉 学 习 的 。 即便 数学 和 物理 是 人 类 知 
慧 的 现 宝 ， 但 如 果 在 年 它 们 能 做 什么 都 不 了 解 的 情况 下 去 勉强 学 习 ， 那 也 是 违 
背 人 类 本 性 的 ， 学 习 起 来 自然 也 就 倍 感 艰难 了 。 


本 书 以 编程 为 题材 ， 节 都 会 先 提出 一 个 需要 解决 的 实际 问题 ， 然 后 针对 
ee 华 知识 讲解 解决 方法 。 为 了 让 这 样 的 学 习 模式 更 加 有 
效 ， 书 中 所 提出 的 问题 应 当 是 真正 实用 的 ， 才 容易 让 读者 产生 兴趣 ， 因 此 本 书 
所 涉及 的 问题 严格 选取 了 实际 2D 游戏 编程 中 不 可 缺少 的 技术 。 而 本 着 尽量 生动 
有 趣 的 原则 ， 在 编撰 和 人 员 的 努力 下 ， 解决 问题 的 示例 程序 都 采用 了 与 实际 游戏 
同样 的 图 片 素 材 。 希 望 广大 读 考 朋友 可 以 籍 由 本 书 更 加 自然 地 走 进门 槛 不 低 的 
数学 和 物理 世界 。 


本 书 大 致 可 以 有 两 种 阅读 方法 。 方 法 一 ， 通 过 解决 问题 的 实际 案例 入 | (第 1 
章 一 第 5 章 ) ， 掌 握 必 要 的 数学 、 物 理 知识 。 这 种 阅读 方法 适合 所 有 想 编 写 游 
戏 程序 的 读者 。 针 对 这 部 分 读者 ， 本 书 涵盖 了 2D 游戏 开发 中 所 涉及 的 几乎 所 有 
的 必要 知识 。 而 对 于 想 要 开发 3D 游戏 的 读者 ， 也 建议 不 要 一 下 跳跃 到 3D， 先 
以 本 书 所 涉及 的 2D 知识 为 基础 开始 学 习 会 更 加 容易 入 门 。 另 一 种 阅读 方法 是 ， 
从 本 书 的 理论 部 分 (第 6 章 ) 开始 ， 先 了 解 本 书 所 涉及 的 数学 、 物 理 公式 在 实 
际 生活 中 客 竟 有 什么 作用 。 推 荐 那些 在 中 学 、 大 学 里 不 得 不 学 习 理 科 ， 却 又 不 
知道 学 习 理 科 有 什么 用 的 同学 们 采用 这 种 阅读 方法 。 我 本 人 作为 一 名 游戏 学 校 
的 讲师 ， 一 直 在 帮助 学 生 将 中 学 、 大 学 里 的 教育 成 果 转 变 为 游戏 公司 的 实际 生 
产 力 ， 充 当 着 桥梁 的 作用 ， 因 此 如 果 本 书 能 对 中 学 生 、 大 学 生 的 理科 教育 有 一 
点 帮助 的 话 ， 对 我 来 说 将 是 意外 的 惊喜 。 


在 阅读 本 书 时 请 注意 ， 为 了 简化 理论 知识 以 外 的 部 分 ， 本 书 中 的 示例 代码 可 能 
会 违背 一 些 代码 编写 的 基本 规范 。 特 别 古 类 似 将 vx 这 样 的 短 变 ; 量 名 作为 全 局 变 
量 的 做 法 ， 在 真正 编程 时 千 万 不 要 去 模仿 。 


最 后 ， 对 给 予 我 执笔 机 会 ， 并 对 内 容 等 方面 提供 巨大 帮助 的 小 川 史 晃 编辑 及 翔 
泳 社 的 诸位 ， 对 邀请 我 写作 并 协助 策划 的 Amusement Media 综合 学 院 的 猪 狩 贤 
0 多 建议 的 学 院 剧本 专业 的 老师 们 ， 一 并 表示 
深 深 的 感谢 。 


2013 年 11 月 
加 腾 洁 


关于 本 书 


目标 读者 -必要 知识 


本 书面 向 的 是 那些 想 从 事 游 戏 开 发 ， 布 望 学 习 游 戏 开 发 中 必要 的 数学 和 物理 学 
知识 的 朋友 。 因 此 本 书 是 一 本 从 基础 开始 ， 讲 解 简单 亲切 的 入 门 书 。 学 习 本 书 
前 ， 最 好 能 掌握 一 些 C 语言 的 基础 知识 ， 如 果 读 者 不 具备 C 语言 知识 ， 建 议 另 
人 
本 书 的 构成 

本 书 的 1~5 章 会 介绍 游戏 开发 中 的 一 些 常见 问题 及 解决 方法 。 在 介绍 过 程 中 会 
将 2D 游戏 必需 的 知识 一 网 打 尽 ， 同 时 还 严格 挑选 出 少量 3D 游戏 编程 的 基础 内 
容 以 供 参考 。 读 者 可 以 通过 调试 示例 程序 ， 对 照 书 中 讲解 一 步 步 学 习 这 些 程序 
所 用 到 的 数学 和 物理 学 知识 以 及 数学 公式 的 用 法 。 


本 书 的 第 6 章 则 对 所 有 示例 中 涉及 的 数学 和 物理 学 知识 的 基础 理论 进行 一 遍 系 
统 梳理 ， 帮 助 读者 更 好 地 理解 第 1~-5 章 。 


正如 前 言 中 所 说 ， 本 书 有 两 种 学 习 方法 : 方法 一 ， 先 阅读 1~5 章 ， 如 果 遇 到 不 
好 理解 的 部 分 ， 再 去 第 6 章 寻 求 更 系统 的 说 明 。 方 法 二 ， 先 阅读 第 6 章 对 所 有 
的 基础 理论 有 大 致 印象 ， 然 后 在 1~5 章 中 逐一 印证 这 些 基 础 理论 是 如 何 运用 到 
实际 案例 中 去 的 。 读 者 朋友 可 以 目 行 选择 适合 目 己 的 阅读 方式 。 

其 他 特色 

阅读 难度 

本 书 每 小 节 都 有 形象 的 难 易 度 标识 ， 在 学 习 时 请 注意 


易 难 


名 
Sh 
I 


RANK/easy RANK/normal RANK/hard RANK/very hard 
初中 级 高 中 级 大 学 级 专家 级 
源 代 码 


本 书刊 载 的 源 代 码 ， 大 多 为 了 便于 讲解 进行 了 精简 。 不 过 书 中 的 代码 与 实际 的 
产 代码 文件 行 数 编号 是 一 一 对 应 的 ， 读 者 可 以 目 行 下 载 源 代码 对 照 学 习 。 


下 载 地 址 : 


https://github.com/AlloVince/physics_mathematics_skills_for_game_development/arc 
hive/trans.zip 


在 线 查 看 : 
https://github.com/AlloVince/physics_mathematics_skills_for_game development 


为 外 ， 本 书 中 的 示例 程序 ， 除 了 数学 和 物理 学 知识 外 还 使 用 了 DirectX， 这 部 分 
内 容 不 在 本 书 的 范围 内 ， 请 读者 目 行 参考 相关 资料 。 


示例 程序 


本 书 每 小 节 都 会 给 出 1~3 个 示例 程序 进行 讲解 ， 可 能 仅 在 纸 上 阅 读 代码 理解 起 
来 有 点 困难 ， 建 议 读者 实际 运行 示例 程序 ， 并 日 修 攻关 代码 中 的 关键 部 分 进行 
调试 ， 对 理解 会 更 有 帮助 。 


下 载 

示例 程序 均 为 可 执行 文件 形式 (EXE 文件 ) ， 同 时 附带 源 代 码 及 图 片 素材 ， 
以 从 上 述 网 址 进行 下 载 。 同 时 作为 参考 案例 ， 源 代码 中 还 有 一 些 额 外 的 EXE 文 
件 ， 这 些 文件 没有 附带 源码 ， 请 读者 自行 琢磨 如 何 实现 。 


运行 EXE 文件 需要 安装 DirectX 11。 源 代码 的 编译 、 运 行 需要 安装 DirectX 11 
11 的 下 载 请 参考 下 面 的 网 址 ， 编 译 、 和 运行 的 说 明 请 参考 本 书 末尾 
y 降 站 部 分 [oe] 


DirectX 11 下 载 地 址 : 


http://www.microsoft.com/zh-cn/download/details.aspx?id=35 
运行 环境 

运行 示例 程序 前 请 确认 已 经 安装 有 以 下 的 运行 环境 。 

OS: Windows 7(32/64 位 )/ Windows 8(64 位 ) 

开发 环境 : 


Visual Studio Express 2013 for Windows Desktop 


Visual Studio Professional 2012 / Visual Studio 2010 Professional 


DirectX SDK 9.29.1962 / DirectX 最 终 用 户 运行 时 9.29.1974 


免责 声明 

本 书 中 的 示例 程序 及 源 代码 ， 已 经 获得 出 版 社 及 作者 的 确认 ， 读 者 可 以 作为 普 
通用 途 使 用 。 但 十 万 一 由 于 使 用 不 当 等 产生 损失 ， 作 译 者 、 逆 瀛 社 和 人 民 邮 电 
出 版 社 不 承担 相应 责任 。 

关于 著作 权 


本 书 的 示例 程序 、 源 代码 ， 以 及 图 片 素材 的 著作 权 ， 归 作者 及 翔 瀛 社 所 有 ， 示 
经 许可 请 勿 将 其 发 布 到 互联 网 。 


第 1 章 物体 的 运动 
1.1 ”让 物体 沿 水 平方 向 运动 

1.2 ”通过 键盘 控制 物体 的 运动 

1.3 ”让 物体 沿 任意 方向 运动 

1.4 ”在 物体 运动 中 加 入 重力 

1.5 ”物体 随机 飞溅 运动 

1.6 ”让 物体 进行 圆周 运动 

1.7 [ 进 阶 ] 微分 方程 式 及 其 数值 解法 


1.1 让 物体 沿 水 平方 向 运动 


K en Word 
匀速 直线 运动 、 X+=V; ~V=-V RANK/easy 


物体 运动 中 最 基本 的 是 直线 运动 。 在 本 小 节 ， 我 们 就 来 一 起 学 习 RPG、 射 击 、 
动作 、 解 谜 等 所 有 游戏 类 型 中 最 基本 的 匀速 直线 运动 吧 。 


说 到 物体 的 基本 运动 ， 请 试想 一 下 物体 以 一 定 速度 沿 直线 运动 的 情况 。 没 错 ， 
这 种 物体 以 固定 速度 行进 的 直线 运动 ， 称 为 匀速 直线 运动 。 本 小 节 就 来 讲解 如 
何 让 物体 进行 匀速 直线 运动 。 


图 1-1-1 匀速 直线 运动 的 程序 
。 沿 水 平方 向 运动 的 程序 
示例 程序 Movement_1_1.cpp 是 物体 单纯 地 沿 水 平方 向 运动 的 程序 。 虽 然 代 
码 有 点 长 ， 但 大 部 分 都 是 为 了 操作 DirectX 以 在 画面 上 演示 运动 ， 真 正 决 定 
物体 运动 的 只 有 以 下 部 分 (代码 清单 1-1-1) 。 


代码 清单 1-1-1 决定 物体 运动 的 处 理 (Movement_1_1.cpp 片 段 ) 


016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
030 


int 


{ 


InitCharacter( void ) // 只 在 程序 开始 时 调用 一 次 
x = 90; // 物体 的 初始 位 置 

v = 3; // 物体 在 x 方向 的 速度 
return 0O; 

MoveCharacter( void ) // 每 帧 调用 一 次 

x += V; // 实际 移动 物体 

return 0O; 


下 面 对 这 部 分 代码 详细 说 明 一 下 。 首 先 ，InitCharacter 函数 是 一 个 只 在 程序 
站 
初始 位 


018 | x = 0; // 物体 的 初始 位 置 


为 0 代表 物体 开始 位 于 画面 最 左 端 。x 方向 的 速度 


// 物体 在 x 方 向 的 速度 


被 设 定 为 3。 


之 后 的 MoveCharacter 函数 是 一 个 在 画面 切换 时 ， 即 每 帧 被 调用 的 轴 数 。 这 
个 函数 进行 的 处 理 为 


027 | x += Vv; // 实际 移动 物体 


即 向 水 平方 向 的 位 置 x 加 入 速度 v。 在 这 里 ，vy 在 初始 设 定 中 为 3， 所 以 每 
次 MoveCharacter 被 调用 〈 即 每 帧 ) 时 x 坐标 都 会 增加 3。 一 般 来 说 到 下 一 


个 画面 切换 的 时 间 即 帧 速率 为 60 秒 ， 因 此 程序 中 物体 会 以 每 秒 180 像素 的 
速度 向 右 侧 移动 (参考 图 1-1-2) 


180(1 秒 ) 


人 
3 3 3 
图 1-1-2 物体 以 每 秒 180 像素 的 速度 移动 
实验 程序 


那么 大 家 是 不 是 对 上 述 内 容 都 理解 了 呢 ? 来 做 个 实验 吧 。 首 先 让 我 们 改变 
一 下 物体 的 运动 速度 。 比 如 将 InitCharacter 函数 内 的 


// 物体 在 x 方向 的 速度 


019 | v=1; // 物体 在 x 方向 的 速度 


1 
这 样 一 来 物体 的 速度 将 变 为 原来 的 3 ， 即 物体 将 比 原来 更 加 缓慢 地 移动 


(Movement_1_1a.cpp) 


然后 让 我 们 在 不 改变 水 平 运动 方式 的 前 提 下 ， 尝 试 把 物体 动作 改造 得 稍微 
复杂 一 点 。 原 程序 中 ， 即 使 物体 到 达 画 面 边缘 ， 也 不 会 停止 ， 而 是 会 直接 
移出 画面 。 让 我 们 来 将 其 修改 为 ， 当 物体 人 页 到 画面 边缘 ， 会 沿 反 方 癌 弹 
回 。 为 此 ， 我 们 分 别 对 InitCharacter 函数 及 MoveCharacter 函数 做 以 下 改 
动 。 


Sl 1-1-2 ”修改 为 物体 碰 到 画面 边缘 时 折 回 (Movement_1_1b.cpp 片 


int InitCharacter( void ) // 


// 
// 


X 
V 


0 1; 
10 


return 0O; 


MoveCharacter( void ) // 


X += Vv; // 


If ( x > VIEW WIDTH - CHAR_WIDTH ) 
V = =Vy 
X VIEW_WIDTH - 


© 
Dh 
CD 


} 

if (x<0)H{ 
V -V; 
x 0; 


} 


return 0O; 


© 
CD 
O) 


只 在 程序 


物体 的 初始 位 
物体 在 x 方 向 的 速度 


始 时 调用 


每 帧 调 


一 次 


实际 移动 物体 


{ 


CHAR_WIDTH ， 


// 
// 
// 


到 右 端 


设 坐 标 为 画面 


hn 


MoveCharacter 此 


顺序 说 明 。 首 先 


玉 数 增加 了 一 些 内 容 ， 


不 过 还 是 从 InitCharacter E 


函数 开始 按 


EE ， InitCharacter 函数 中 Xx 方向 的 速度 


// 物体 在 x 方向 的 速度 


从 之 前 的 3 增加 到 了 10。 虽 然 速 度 变 快 了 ， 但 是 由 于 新 程序 会 让 物体 在 画 
面 边缘 弹 回 ， 因 此 不 必 担 心 物 f 会 一 下 子 从 画面 中 消失 。 然后 在 
MoveCharacter 函数 中 使 用 了 2 个 主语 句 ， 追 加 了 物体 碰 到 画面 左右 端 时 弹 
回 的 处 理 。 下 面 以 画面 右 端的 处 理 为 例 进 行 说 明 。 

029 | if ( x > VIEW WIDTH - CHAR WIDTH ) { // 物体 碰 到 右 端 


这 一 行 用 来 判断 物体 是 否 碰 到 画面 右 端 其 中 VIEW _ WIDTH 是 画面 的 宽 
度 ， 即 画面 右 端的 x 从 标 。 那 么 有 人 可 能 会 想 ， 判 断 物体 是 否 碰 到 画面 右 
端 ， 只 要 比较 一 下 物体 的 x 坐标 和 VIEW_WIDTH 不 就 好 了 吗 ? 事实 上 并 


没 这 么 简单 ， 因 为 电脑 在 绘制 2D 物体 时 ， 一 般 会 以 物体 的 左上 角 作 为 物体 
坐标 的 原点 ， 如 果 只 是 使 物体 的 x 坐标 不 超出 VIEW_WIDTH， 会 让 物体 完 
全 移出 画面 之 外 (参考 图 1-1-3 左 ) 。 因 此 当 物 体 碰 到 画面 右 端 时 ， 为 了 使 
程序 做 出 “已 经 磁 到 ”的 判断 ， 应 当 从 画面 右 端的 x 坐标 VIEW_WIDTH 中 ， 
减 去 物体 本 身 的 大 小 CHAR_WIDTH， 然 后 再 与 物体 的 x 坐标 比较 (参考 图 
1-1-3 右 ) 。 上 面 的 讲解 可 能 有 点 复杂 ， 和 希望 大 家 能 正确 理解 。 


x=VIEW WIDTH X= VIEW WIDTH 
| CHAR WIDTH 


物体 的 坐标 < 


画面 画面 
物体 完全 超出 画面 物体 碰 到 画面 右 端 

图 1-1-3 物体 到 达 画 面 右 端 时 的 计算 

然后 ， 当 物体 碰 到 边缘 时 运行 下 面 这 行 处 理 。 


030 | VvV = -Vv; // 弹 回 


这 行 代码 负责 对 物体 的 弹 回 动作 进行 处 理 。 具 体 来 说 就 是 反 转 速度 的 符 

号 。 比 如 程序 中 速度 的 初始 值 为 10， 当 物体 磁 到 画面 边缘 时 速度 将 变 成 
-10， 再 磁 到 另 一 边 时 从 -10 变 回 10， 因 此 物体 会 沿 反 方向 和 运动。 可 能 有 人 
会 有 疑问 ， 既 然 这 个 证 语句 中 判断 的 对 象 是 画面 右 端 ， 我 们 已 经 知道 物体 
古 同 右 运 动 的， 同时 物体 在 向 右 运动 的 过 程 中 碰 人 到 边缘 时 的 v 必定 为 10， 
将 v 变 为 -10 后 物体 就 会 同 左 运动 。 那 么 将 


030 | V = -Vv; // 弹 回 


不 是 更 加 容易 理解 吗 ? 这 样 的 硬 编码 是 不 好 的 ， 因 为 如 果 这 样 写 ， 我 们 下 
次 要 更 改 移动 速度 时 ， 就 不 得 不 移 在 速度 的 初始 化 函数 InitCharacter 中 找到 
下 述 设 定 项 并 进行 更 改 ， 


019 | v = 10; // 物体 在 x 方向 的 速度 


但 是 只 更 改 这 里 的 初始 设 定 程序 仍然 无 法 正常 工作 。 
处 将 初始 速度 减 半 至 5， 那么 物体 碰 到 画面 右 端的 瞬间 ， 其 速度 将 突然 倍增 
为 -10 并 进行 反 向 运动 ， 这 就 违背 了 我 们 的 意图 。 如 采 要 扩展 这 个 程序 ， 比 
如 新 增加 速度 的 处 理 等 ， 这 样 硬 编码 的 速度 会 让 程序 完全 无 法 修改 。 因 此 
考虑 到 程序 的 可 维护 性 及 扩展 性 ， 需 要 将 速度 书写 为 


030 | VvV = -v; // 弹 回 


最 后 说 明 下 面 这 行 。 


031 | x = VIEW_WIDTH - CHAR_WIDTH; ”// 重 设 坐标 为 画面 


边缘 


正如 注释 中 所 写 的 那样 ， 这 行 是 为 了 将 物体 强制 移动 到 正好 与 边缘 接 触 的 


位 置 。 之 所 以 这 样 处 理 ， 十 由 于 判断 物体 是 否 碰 到 边缘 的 证 语句， 征 在 物 
体 实 际 已 经 碰 到 了 边缘 之 后 才 执行 的 。 比 如 ， 假 设 物体 在 前 一 帧 中 距离 边 
绿 还 有 1 像素 ， 且 在 当前 帧 中 的 速度 达到 了 10， 那 么 当 物 体 实际 已 经 超出 
边缘 9 像素 时 ，if 语 句 才 会 执行 。 这 样 显然 会 有 问题 。 因 此 无 论 物体 在 与 边 
经 接触 的 瞬间 是 否 会 超出 ， 我 们 都 将 物体 强制 设置 回 与 边缘 正好 接触 的 位 
置 (参考 图 1-1-3 右 ) 。 注 意 观察 就 会 发 现 ， 重 设 物体 位 置 的 语句 


031 | Xx = VIEW_WIDTH - CHAR_WIDTH; // 重 设 坐 标 为 画面 边缘 


| 


与 检测 物体 是 否 碰 到 右 端的 证 语句 


029 | if ( x > VIEW WIDTH - CHAR WIDTH ) { // 物体 碰 到 右 端 


的 区 别 只 是 将 请 合 中 的 大 于 号 (> 更改 凡 本寺 号 (=) 。 换 个 角度 思考 ， 
这 里 的 处 理 就 相当 于 一 旦 做 出 物体 接触 到 边缘 的 判断 ， 就 立即 将 物体 强制 
移动 至 判断 开始 发 生 的 位 置 。 


至 此 ， 我 们 对 物体 碰 到 画面 右 端 时 弹 回 的 处 理 进行 了 说 明 。 这 部 分 处 理 之 


后 ， 代 码 中 还 有 画面 左 端的 弹 回 处 理 ， 处 理 内 容 与 画面 右 疹 是 一 样 的 ， 此 
处 不 再 痪 述 


1.2 ”通过 键盘 控制 物体 的 运动 


候 可 


Ke Word 
0 键盘 输入 、 斜 方向 移动 、 勾 股 定理 weasy 前 


半 部 分 RANK/normal 后 半 部 分 


物体 运动 中 最 基本 的 是 直线 运动 。 在 本 小 节 ， 我 们 就 来 一 起 学 习 RPG、 射 击 、 
动作 、 解 谜 等 所 有 游戏 类 型 中 最 基本 的 匀速 直线 运动 吧 。 


用 户 通过 键 弄 输入 控制 物体 的 运动 ， 是 无 法 简单 地 通过 直线 运动 实现 的 。 本 小 
下 就 来 讲解 包括 斜 方向 运动 在 内 的 可 通过 键盘 控制 的 物体 运动 。 


In 


图 1-2-1 通过 键盘 输入 控制 物体 运动 的 程序 
。 通过 键盘 输入 控制 物体 运动 的 程序 
示例 程序 Movement_2_1.cpp 是 一 个 通过 键盘 输入 控制 物体 运动 的 简单 程 
序 。 这 个 程序 有 点 类 似 于 一 个 极为 简陋 的 射击 游戏 ， 按 键盘 的 左右 方 癌 键 
可 以 移动 物体 。 
决定 物体 移动 的 代码 如 下 所 示 (代码 清单 1-2-1) 。 


a 1-2-1 根据 键盘 输入 左右 移动 物体 的 处 理 (Movement_2_1.cpp 


018 | int Initcharacter( void ) // 只 在 程序 开始 时 调用 一 次 
019 | { 

020 | // 物体 的 初始 位 置 

021 | x = ( VIEW WIDTH - CHAR WIDTH ) / 2.0f; 

022 | y = ( VIEW_HEIGHT - CHAR_HEIGHT ) / 2.0f; 
023 | 

024 | return 0; 

025 | } 

026 | 

027 | 

028 | int MoveCharacter( void ) // 每 帧 调用 一 次 


029 | { 

030 | // 左 方 向 键 被 按 下 时 向 左 移 动 

031 | if ( GetASsyncKeyState( VK_LEFT ) ) { 

032 | x -= PLAYER_VEL， 

033 | if (x < 0.0f ) { 

034 | x = 0.0of,; 

035 | } 

036 | } 

037 | // 石 方向 键 被 按 下 时 向 右 移 动 

038 | if ( GetAsyncKeyState( VK_RIGHT ) ) { 

039 | x += PLAYER_VEL ， 

040 | if ( x > ( float )( VIEW WIDTH - CHAR WIDTH ) ) { 
041 | x = ( float )( VIEW WIDTH - CHAR_WIDTH ); 
042 | 

043 | } 

044 | 

045 | return 0; 

046 | } 


在 初始 化 函数 InitCharacter 中 ， 定 义 了 物体 的 初始 位 置 ， 如 下 所 示 。 


020 | // 物体 的 初始 位 
021 | x = ( VIEW WIDTH - CHAR WIDTH ) / 2.0f; 
022 | y = ( VIEW HEIGHT - CHAR_HEIGHT ) / 2.0f; 


ts 在 水 平方 向 和 垂直 方向 的 值 ， 让 物体 的 初始 位 置 位 于 画面 


然后 在 每 帧 调用 的 MoveCharacter 函数 中 实现 了 一 个 主要 功能 : 当 一 些 特 殊 
按键 被 按 下 时 ， 物 体 向 特定 的 方向 移动 ， 而 除 此 以 外 的 按键 被 按 下 时 ， 则 
不 做 任何 处 理 。 因 此 必须 要 有 一 个 按键 检测 机 制 来 判断 当前 特殊 按键 是 否 
被 按 下 了 。 为 此 程序 中 调用 了 一 个 名 为 GetAsyncKeyState 的 函数 。 这 个 函 
数 属于 Windows API 的 一 部 分 ， 即 使 没有 DirectX 也 可 以 使 用 。 如 果 想 通过 
DirectX 检测 键盘 输入 等 用 户 输入 ， 需 要 使 用 DirectInput 函数 ， 而 此 处 要 检 
测 的 输入 比较 简单 ， 仅 使 用 Windows API 就 足够 了 。 通 过 
a 函数 检测 无 方 回 键 是 否 被 按 下 ， 可 以 参考 下 面 这 行 代 


if ( GetASsyncKeyState( VK_LEFT ) ) { 


同 理 ， 检 测 右 方向 键 时 的 代码 为 


038 | if ( GetAsyncKeyState( VK_RIGHT ) ) { 


接着 看 MoveCharacter 的 内 部 ， 当 左 方向 键 被 按 下 时 ， 


032 | x -= PLAYER_VEL， 


物体 的 x 坐标 会 减 去 常数 PLAYER_VEL。 对 xx 坐标 做 减法 就 等 同 于 物体 向 
画面 的 左 方 移动 。 但 除 此 之 外 ， 还 会 进行 下 面 这 一 处 理 。 


if(x< 0.0f ) { 
x = 0.0f; 


} 


这 个 处 理会 使 物体 到 达 画 面 左 端 时 不 再 癌 左 移动 。 


右 方 向 键 被 按 下 ( 即 满足 条 件 if (GetAsyncKeyState( VK_RIGHT ) )) 时 的 
处 理 为 


039 | x += PLAYER_VEL,; 


物体 的 x 坐标 将 增加 PLAYER_VEL， 物 体会 同 右 移动 。 此 处 也 存在 一 个 特 
殊 处 理 ， 即 


if ( x > ( float )( VIEW WIDTH - CHAR WIDTH ) ) { 
x = ( float )( VIEW WIDTH - CHAR WIDTH ); 


这 样 一 来 ， 物 体 在 到 达 画 面 右 端 时 ， 也 不 会 再 向 右 移动 。 另 外 ， 此 处 还 进 
行 了 一 个 (float) 强制 类 型 转换 ， 这 是 由 于 表示 坐标 的 变量 x 使 用 的 是 float 
类 型 ， 而 VIEW_WIDTH 和 CHAR_WIDTH 则 被 定义 为 了 int 型 的 常数 ， 为 
了 比较 和 赋值 ， 需 要 提前 统一 为 float 型 。 


。 多 个 按键 的 输入 


接 下 来 让 我 们 务 试 使 物体 不 只 可 以 左右 方 癌 移动 ， 还 可 以 j 


清单 1-2-2) 。 
代码 清单 1-2-2 ”使 物体 可 以 根据 按键 输入 上 下 方向 运动 


(Movement_ 2_1a.cpp 片段 


上 -下方 回 移动 


Movement 2_1a.cpp) 。 为 此 ， 对 MoveCharacter 函数 做 如 下 变更 (代码 


027 | int MoveCharacter( void ) // 每 帧 调用 一 次 

028 | { 

629 | pp i be 
DR 1 

030 | if ( GetAsynckKeyState( VK_ LEFT ) ) { 

031 | x -= PLAYER_VEL， 

| 

032 | if (x < 0.0f ) { 

F--® 

033 | x = 0.0of; 

034 | } 

| 

035 | }------------ 
rR J 

636 | 和 省 坟 向 庆 全 术科 村 商 帮 奉 二 和 
i 1 

037 | if ( GetAsyncKeyState( VK_RIGHT ) ) { 

038 | x += PLAYER_VEL ， 

| 

039 | if ( x > ( float )( VIEW WIDTH - CHAR WIDTH ) ) { 
F--® 

040 | x = ( float )( VIEW WIDTH - CHAR_WIDTH ); 

041 | } 

| 

042 | yi 
Ee J 

643 | /A 鼎 方 问 健 眉 近 下 轩 间 此 物 二 SD Dn 
本 1 

044 | if ( GetAsynckKeyState( VK UP ) ) { 

045 | y -= PLAYER_VEL; 

046 | if (y < 0.0f ){ 

|--® 

047 | y = 0.0f; 

048 | } 

049 | $0 
a J 

06607 ) “2 下放 向 给 宙 全 | 邮 让 完 双 SE 


051 | if ( GetAsynckKeyState( VK DOwWN ) ) { 


y += PLAYER_VEL， 
if (y > ( float )( VIEW_ HEIGHT - CHAR_HEIGHT )){ 


| 
| 
054 | y = (float )( VIEW_HEIGHT - CHAR_HEIGHT ); 
| 
| 


| 
058 | return 90; 
| 


代码 行 数 增加 了 不 少 ， 不 过 基本 -只 十 把 修改 前 对 x 4 坐标 的 处 理 照搬 到 了 y 


坐标 上 而 已 。 具 体 说 来 代码 段 (3) 的 功能 是 ， 在 上 方向 链 被 按 下 时 从 y 坐标 

减 去 PLAYER_VEL， 并 使 物体 在 到 达 画 奋 端 后 不 再 向 上 移动 。 负 的 部 分 
同 理 ， 在 下 方 同 键 被 按 下 时 问 y 坐标 增加 PLAYER_VEL， 并 使 物体 在 到 达 
画面 下 端 后 不 再 朵 下 移动 。 


这 样 一 来 很 多 人 都 会 产生 疑问 ， 如 采 同 时 按 下 多 个 按键 物体 将 会 如 何 移动 
呢 ? 比如 物体 只 在 水 平方 向 移动 时 ， 同 时 按 下 左右 方向 键 (可 以 看 作 停止 
运动 的 操作 ) ， 物 体会 停止 移动 ， 这 也 比较 符合 人 们 一 般 的 思维 习惯 。 而 
如 果 物 体 不 仅 左右 移动 而 且 上 下 移动 ， 那 么 就 可 以 将 左右 按键 与 上 下 按键 
进行 一 些 组 合 ， 可 能 性 也 就 更 多 了 ， 比 如 同时 按 上 方向 键 与 左 方向 键 时 物 
体会 如 何 运动 呢 ? 在 目前 的 程序 里 ， 如 果 同 时 按 上 方向 键 与 左 方向 键 ， 即 
人 条 件 届 与 条 件 (3) 同 时 满足 时 ， 物 体 将 向 画面 的 左上 和 角 移动 (参考 图 
1-2-2 


想必 物体 的 上 述 运动 大 家 都 能 够 想象 得 出 来 ， 但 问题 是 物体 的 速度 会 如 何 
变化 呢 ? 比如 上 方 同 键 与 左 方 问 键 同时 被 按 下 时 ， 


031 | x -= PLAYER_VEL， 


三 


图 1-2-2 上 方向 键 与 左 方向 键 同时 被 按 下 时 物体 向 左上 角 移动 


045 | y -= PLAYER_VEL; 


的 处 理会 同时 进行 ， 那 么 物体 的 速度 显然 要 比 单方 向 的 PLAYER_VEL 更 
快 ， 因 为 物体 既 在 x 方向 上 以 PLAYER_VEL 的 速度 运动 ， 同 时 又 在 y 方 向 
上 以 PLAYER_VEL 的 速度 运动 。 这 种 情况 下 ， 物 体 沿 斜 方向 移动 的 速度 究 
竟 是 多 少 呢 ? 


首先 可 以 明确 的 是 ， 上 述 情 况 下 物体 的 速度 肯定 要 比 PLAYER_VEL 更 快 。 

但 是 由 于 物体 不 是 在 同一 方向 (如 x 方向 ) 上 以 2 倍 的 PLAYER_VEL 速度 
运动 ， 而 是 在 x 方向 和 yy 方向 上 分别 以 PLAYER_VEL 的 速度 运动 ， 所 以 瓯 
怕 物 体 的 真正 速度 又 比 2 倍 的 PLAYER_VEL 要 慢 。 于 是 可 以 得 到 下 面 的 不 


<vy< 
Vp <v 2vVp 


这 里 v 代表 PLAYER_VEL， 即 只 按 一 个 方向 键 时 物体 的 速度 。v 则 代表 两 
个 方向 键 同时 被 按 下 时 物体 的 速度 。 


但 是 ， 仅 有 这 个 不 等 式 ， 还 是 无 法 知道 斜 方向 上 的 速度 v 究竟 是 多 少 ， 或 
者 说 v 与 w 之 间 究 竟 有 怎样 的 关系 。 这 个 时 候 ， 我 们 吉 需 要 使 用 数学 上 的 
勾 股 定理 了 。 简 单 地 说 ， 勾 股 定理 就 是 能 通过 直角 三 角形 的 两 条 边 的 长 
度 ， 计 算出 剩 下 一 条 边 的 长 度 的 定理 。 而 这 个 定理 在 游戏 中 ， 以 计算 直角 
三 角形 的 斜 边 的 长 度 居多 。 假 设 直角 三 角形 的 斜 边 长 为 c ， 两 直角 边 长 分 
别 为 a、b ， 那 么 公式 为 


EC 三 加 “4 


参考 图 1-2-3 。 


勾 股 定理 : c=@ 十 


C 
图 1-2-3 ”通过 两 边 的 长 度 求 剩 余 一 边 的 长 度 


而 物体 同时 在 x 方向 和 y 方向 上 以 速度 w 运动 的 情况 下 ， 也 可 以 套用 勾 股 
定理 。 首 先 ， 让 我 们 只 考虑 一 帧 内 物体 运动 的 距离 。 此 时 ， 由 于 物体 在 一 
帧 内 在 x 方向 与 y 方 向 上 移动 的 速度 均 为 v， (PLAYER_VEL) ， 那 么 以 这 
两 个 移动 距离 各 自作 为 三 角形 的 一 边 ， 就 可 以 绘制 出 一 个 等 腰 三 角形 。 而 
由 于 x 方向 与 y 方 向 互 为 直角 ， 结 果 物 体 的 最 终 速度 v 就 是 这 个 等 腰 直 角 三 
角形 的 斜 边 (参考 图 1-2-4) 。 


TS 


等 腰 直 和 角 


2 


图 1-2-4 通过 x 方向 与 y 方向 的 速度 求 速度 v 


套用 勺 股 定理 就 是 


2 e272 ;2 
Uv 二 号 十 如 


了 I 


等 式 右边 相 加 得 到 


4 9 
2 92 
Uv 一 21t p 


三 角形 


因为 我 们 最 终 要 得 到 的 是 v 而 不 是 v“ ， 所 以 等 式 两 边 都 取 平方 根 ， 得 到 


二 士 V2u 
由 于 我 们 最 终 要 求 的 速度 不 会 是 负 值 ， 所 以 


即 同时 按 下 左 方向 键 和 上 方向 键 时 ， 物 体 既 不 会 向 水 平方 向 


1.41421， 因 此 物体 在 斜 方 同 的 运动 速度 约 为 平时 的 1.4 倍 。 


移动 ， 也 不 会 


向 垂直 方向 移动 ， 而 是 会 以 V2o 的 速度 向 左上 方向 移动 。V2 约 等 于 


在 真正 的 游戏 


中 (特别 是 2D 射击 类 游戏 ) ，“ 斜 方向 的 移动 速度 为 原 速度 的 1.4 倍 " 这 种 


情况 一 般 是 允许 出 现 的 〈 视 实际 情况 也 会 有 特例 ) ， 大 家 随 


问 移 动 没有 什么 问题 ， 但 既然 做 到 了 这 种 程度 ， 我 们 就 来 洽 


便 想 想 就 能 列 


举 出 不 少 这 种 沿 斜 方向 移动 时 速度 变 快 的 游戏 。 虽 然 以 V2 倍 的 速度 沿 斜 方 


试 一 下 如 何 让 


斜 方 回 的 移动 速度 保持 不 变 吧 。 如 Movement_2_1b.cpp 所 示 ， 我 们 对 
MoveCharacter 函数 做 了 以 下 修改 〈 代 码 清 单 1-2-3) 。 


四 1-2-3 ”使 斜 方向 的 移动 速度 保持 不 变 (Movement_2_1b.cpp 片 


027 | #define ROOT2 1.41421f 
028 | int MoveCharacter( void ) // 每 帧 调用 一 次 
029 | 
030 | short bLeftkey, brRightkey; 
031 | short bUpKey, bDownKey; 
032 | 
033 | bLeftKey = GetAsynckKeyState( VK_LEFT ); 
034 | brRightkey = GetAsyncKeyState( VK_RIGHT ); 
035 | bUpKey = GetAsynckeyState( VK_UP ); 
036 | bDownKey = GetAsyncKeyState( VK_DOWN ); 
637 | /7 左 方 辣 绸 洋 按 下 时 间 帮 移动 ss epee meen 
038 | if ( bLeftkey ) { 
| 
039 | if ( bUpKey || bDownkey ) { 
| 
040 | x -= PLAYER_VEL / ROOT2;,; 
| 
041 | } 
| 
042 | else { 
F--® 
043 | x -= PLAYER_VEL， 
| 
044 | } 
| 
045 | if (x<0)It 
| 
046 | x = 0; 
| 
047 | } 
| 
048 | }------------ 
649 | 7 者 六 人 信 机 和 时间 村 物 二 Ds 
050 | If ( bRightKey ) { 
| 
051 | if ( bUpKey || bDownkey ) { 
| 
052 | x += PLAYER_VEL / ROOT2,; 
| 
053 | } 
| 
054 | else { 
F--® 
055 | x += PLAYER_VEL,; 
| 
} 


057 | if ( x >= ( float )( VIEW WIDTH - CHAR WIDTH ) ) { 


058 | x = ( float )( VIEW WIDTH - CHAR_WIDTH ); 

| 

059 | } 

060 | $0 
ae J 

961 | yA pL DL 2 
性 1 

062 | if ( buUpKkey ) { 

| 

063 | if ( bLeftkey || bRightKey ) { 

064 | y -= PLAYER_VEL / ROOT2,; 

| 

065 | } 

| 

066 | else { 

|--® 

067 | y -= PLAYER_VEL; 

| 

068 | } 

069 | if (y<0)t 

070 | y = 0; 

| 

071 | } 

| 

072 | }------------ 
RE J 

673 | 4 
i 1 

074 | if ( bDownKey ) { 

| 

075 | if ( bLeftkey || brightkey ) { 

| 

076 | y += PLAYER_VEL / ROOT2; 

| 

077 | } 

| 

078 | else { 

|--@ 

079 | y += PLAYER_VEL; 

| 

080 | } 

| 

081 | if (y>= ( float )( VIEW HEIGHT - CHAR_HEIGHT ) ) { 

082 | y = ( float )( VIEW_HEIGHT - CHAR_HEIGHT ); 

| 

083 | } 

| 

084 | }----------- 


086 | return 90; 


这 里 首先 定义 了 bLeftKey、bRightKey、bUpKey、bDownKey 四 个 变量 ,分 


别 存 放 左 、 右 、 上 、 下 方向 键 当前 是 否 被 按 下 这 一 信息 。 下 面 主要 以 左 方 
向 键 被 按 下 时 向 左 移动 的 代码 段 届 为 例 来 详细 说 明 。 在 这 部 分 中 ， 首 先 检 
查 左 方 同 键 有 没有 被 按 下 。 


038 | if ( bLeftkey ) { 


当 左 方 同 键 被 按 下 时 ， 表 接着 检查 上 下 方 疝 键 有 没有 被 按 下 。 


039 | if ( bUpKey || bDownkey ) { 


如 末 在 左 方 品 键 被 按 下 的 同时 ， 又 有 上 下 方向 键 中 的 一 个 被 按 下 ， 那 么 程 
序 就 会 认为 物体 在 向 斜 方向 移动 并 执行 以 下 语句 。 


040 | x -= PLAYER_VEL / ROOT2; 


如 果 物 体 在 x 方 向 和 y 方 向 的 移动 速度 仍然 是 PLAYER_VEL, 那么 斜 方 向 
的 运动 速度 就 为 原来 的 V2 倍 ， 因 此 这 里 通过 将 原 速度 乘 以 V2 ， 斜 方向 的 
运动 速度 就 会 仍然 保持 PLAYER_VEL 不 变 (参考 图 1-2-5) 。 


| 


1 
图 1-2-5 重 置 物体 在 水 平 及 垂直 方向 的 移动 速度 为 V2 ， 使 物体 在 斜 方向 
上 的 移动 速度 保持 不 变 


而 如 果 左 方向 键 被 按 下 ， 上 下 方向 键 都 没有 被 按 下 时 ， 物 体 将 仍然 以 速度 
PLAYER_VEL 向 水 平方 向 和 运动 。 


043 | x -= PLAYER_VEL; 


通过 将 上 述 处 理应 用 到 右 方向 键 、 上 方向 键 和 下 方向 键 ， 及 
体 在 水 平 、 垂 直 、 和 斜 方向 上 的 移动 速度 都 固定 为 PLAYER_VEL。 但 是 上 面 
的 程序 只 能 应 对 两 个 方向 键 被 同时 按 下 的 情况 ， 而 没有 考虑 到 同时 六 下 三 
个 方向 键 的 情况 。 比 如 左 、 上 、 下 三 个 方向 键 同 时 被 按 下 时 ， 上 下 的 运动 
被 抵消 ， 物 体 不 会 向 垂直 方向 运动 ， 只 会 向 左 方向 运动 但 是 由 于 网 
向 键 处 于 被 按 下 的 状态 ， 所 以 物体 在 左 方向 的 运动 速度 会 变 为 平时 的 V2 
倍 。 也 就 是 说 ， 我 们 无 意 中 创 造 了 一 个 游戏 秘技 ， 可 以 转 过 得 珠 操 作 计 物 
体 运 动 得 比 平时 更 慢 ， 即 同时 按 “ 上 与 下 ”或 “ 左 与 右 * 这 样 相反 的 方向 刍 。 但 
是 这 仅 限 于 可 以 不 受 限 制 地 同时 按 任意 个 键盘 的 方向 键 或 其 他 按键 的 环 
境 。 而 考虑 到 多 数 游戏 使 用 的 都 是 游戏 手柄 或 游戏 摇 杆 等 ， 这 些 设备 从 物 
理 上 就 无 法 同时 输入 相反 的 方向 ， 自 然 也 就 不 会 存在 这 一 秘技 ， 因 此 这 里 
省 略 了 三 个 方向 键 同 时 输入 时 的 程序 处 理 。 如 果 对 这 部 分 程序 心 存 疑虑 ， 
那 就 不 妨 自 己 努 力 打 造 一 个 不 会 轻易 被 秘技 搞 坏 的 游戏 吧 。 


1.3 ”让 物体 沿 任意 方向 运动 


Ke Word 
“0 三 角 男 数 、 正 弦 、 人 余弦、 弧度 RANK/normal 


我 们 已 经 学 习 了 让 物体 沿 水 平 、 斜 方向 运动 。 这 次 让 我 们 再 进一步 ， 来 学 习 如 
何 让 物体 沿 任意 方向 运动 吧 。 


接 下 来 ， 我 们 一 起 学 习 如 何 让 物体 以 任意 速度 、 沿 任意 方向 运动 。1.1 和 介绍 了 
如 何 让 物体 沿 水 平方 向 运动 ，1.2 节 的 后 半 部 分 介绍 了 如 何 让 物体 沿 45 度 角 的 
和 斜 方 向 运动 ， 让 我 们 在 此 基础 上 进一步 拓展 ， 让 物体 在 任意 方向 以 任意 速度 运 
动 。 还 没有 实践 过 物体 沿 水 平方 向 及 45 度 角 方向 运动 的 读者 ， 建 议 先 完 成 前 面 
两 小 节 的 程序 再 开始 本 小 节 的 学 习 。 


图 1-3-1 使 物体 沿 任意 方向 以 任意 速度 运动 的 程 


假设 物体 的 运动 速度 为 v ， 那 么 物体 沿 任意 方向 的 运动 一 般 都 可 以 被 分 拆 为 在 x 
轴 、y 轴 两 个 方向 上 的 运动 。 假 设 分 拆 后 物体 在 x 方 向 上 的 速度 为 w ， 在 方向 
上 的 速度 为 w ， 物 体 运动 方向 与 x 轴 的 夹 角 为 6 (参考 图 1-3-2) 。 


图 1-3-2 表示 物体 运动 的 元 素 


实际 在 画面 上 显示 物体 时 必须 要 有 x 坐标 和 y 坐标 ， 计 算 坐 标 就 需要 v 和 v， 
而 这 两 者 则 可 以 通过 物体 的 速度 vy 与 物体 运动 方向 与 x 轴 的 夹 角 6 计算 得 到 。 


。 让 物体 沿 30 度 角 方向 运动 的 程序 


我 们 将 J FE 述 计 算 程序 化 ， 制作 一 个 让 物体 沿 相 对 x 轴 30 度 角 方向 运动 的 示 
例 程序 ， 请 参考 Movement_3_1.cpp (只 是 程序 中 的 y 坐标 是 基于 电脑 画面 
的 ， 与 数学 中 常用 的 坐标 正好 相反 (向 下 为 +) ， 所 以 请 注意 这 里 应 该 是 向 
斜 下 方 运动 ) 。 这 个 程序 中 决定 物体 运动 的 是 InitCharacter 函数 中 的 以 下 3 
行 代 码 (PI 为 圆周 率 ) 。 


上 1-3-1 沿 相对 于 x 轴 30 度 角 的 斜 方向 运动 (Movement_ 3_1.cpp 


fAngle = PI / 6.0Of,; 
Vx = PLAYER VEL * cosf( fAngle ); 设置 初始 速度 
Vy = PLAYER VEL * sinf( fAngle ); 


程序 中 突然 出 现 了 正弦 (sin) 余弦 (cos) 的 三 角 画 数 ， 为 什么 会 用 到 它们 
呢 ? 我 们 来 详细 说 明 一 下 。 首 先 可 以 明确 的 是 x、y 方向 上 的 速度 w、 
与 物体 的 实际 速度 v 是 成 一 定 比 例 的 。 也 就 是 说 ， 当 运动 方向 的 角度 一 

时 ， 比 如 当 v 变 为 原来 的 2 倍 时 ，v 和 v, 也 应 当 变 为 2 倍 把 这 种 比例 关 
系 写 成 具体 的 算式 ， 束 可 以 得 到 


这 里 的 a、b 均 为 常数 ， 称 为 比例 系数 。 比 如 系数 a 代表 v 增 加 1 时 ,，v、 


增加 a。 大 家 可 能 会 觉 得 不 好 理解 ， 这 里 举 一 个 具体 的 例子 。 比 如 ， 当 物 
体 在 水 平方 癌 运 动 时 ， 


也 就 是 说 ， 此 时 的 a=1、b=0， 并 且 物 体 的 运动 方向 正好 是 x 轴 的 方向 ， 所 
以 物体 运动 方向 的 角度 6 为 0。 如果 物 体 沿 斜 45 度 方向 运动 的 话 ， 速 度 ] 
好 会 变 为 原来 的 V2 倍 。 


片 | 


上 式 的 计算 过 程 可 以 参考 1.2 节 的 所 六 部 分 。 即 如 果 物 体 运 动 方向 的 角度 6 
Eee 


变 成 45 度 ， 那 就 是 2、 Vi。 也 就 是 说 , 当 9 为 0 时 ,a=1、b 
a=—— 1 

=0; 当 0 为 4 度 时 ， v2、 V2。 

那么 当 角度 9 取 任意 值 时 ，a 与 b 的 值 将 会 如 何 变 化 呢 ? 为 了 得 出 结论 ， 首 


先 可 以 写 出 常数 a 与 b 必定 满足 的 条 件 。 由 于 v 和 vy 最终 会 合成 速度 vy， 
因此 它们 也 满足 勾 股 定理 (参考 图 1-3-3) 。 


2 2 
vx vy = 


2 
畜 图 
1-3-3 ”对 速度 套用 勾 股 定理 


然后 将 w =a.v、 风 =Dv 的 关系 代入 ， 得 到 
(a-:w2 + {hb-.v = 

2 2 

等 式 两 边 同 时 除 以 v2 ， 得 到 

+ 二 1 


很 明显 可 以 看 出 ， 上 文中 物体 在 水 平 、 斜 45 度 角 方向 运动 时 的 a、b ， 都 
满足 上 面 的 等 式 关 系 。 


让 我 们 再 仔细 看 看 这 个 等 式 ， 它 与 半径 为 1 的 圆 “ 即 单位 圆 ) 的 公式 是 完 
全 一 样 的 。 即 将 a 作为 横 轴 坐标 、b 作为 纵 轴 坐标 所 得 到 的 点 连接 起 来 ， 正 
好 可 以 画 出 一 个 半径 为 1 的 圆 。 由 于 V、vy 分 别 是 v 乘 以 a、b 得 到 的 ， 
而 V、vy 所 决定 的 物体 移动 方向 正好 与 a、b 所 做 的 单位 贺 上 的 点 的 方向 
相同 ， 因 此 绘制 出 的 角度 6 将 如 图 1-3-4 所 示 。 


图 1-3-4 单位 圆 与 角度 09 


也 就 是 说 ，a 与 b 分 别 代表 单位 贺 上 角度 6 的 点 的 x 坐标 与 坐标。 根据 三 
角 画 数 的 定义 ，a 与 b 可 以 表示 成 如 下 等 式 。 


a = Cost 

b=sing 

看 到 这 两 个 等 式 ， 是 不 是 会 想 问 这 是 为 什么 呢 ? 其 实 这 就 是 三 角 画 数 中 余 
纺 画 数 、 正 弦 函 数 的 定义 。 即 角度 6 在 单位 圆 上 的 位 置 的 x 坐标 称 为 余 
弦 ，y 坐标 称 为 正弦 ， 这 是 由 数学 家 所 定义 的 。 从 上 式 可 以 推导 出 


Urs = COBY -UT 
vy 一 Si 1 
由 此 最 终 写 出 了 示例 程序 中 的 语句 。 
只 是 示例 程序 Movement_3_1.cpp 中 仍然 存在 不 明之 处 。 


025 | fAngle = PI / 6.0f,; 


即 物体 运动 方向 的 角度 被 置 为 了 6 也 就 是 本 小 节 一 开始 所 说 的 30 度 角 方 
向 。 这 是 由 于 计算 机 中 的 三 角 函 数 (正弦 余弦 等 ) 所 能 ee 并 不 


是 以 角度 制 为 单位 的 (一周 有 360 度 “30 度 是 一 周 的 也" 360'  ， 那 么 


和 得 到 
的 12 借 ， 即 2 可 以 表示 一 周 。 如 果 有 人 质疑 是 否 真 的 是 这 样 ， 可 以 将 各 


序 中 的 fAngle 从 6 更 改 为 2r ， 即 将 运动 的 角度 指定 为 0， 这样 就 可 以 看 到 
物体 会 沿 水 平方 向 运动 (画面 右 方向 ) 。 


事实 上 ， 这 种 将 一 周 表 示 为 2r 的 度量 单位 ， 称 为 弧度 制 。 弧 度 代表 半径 为 
1、 圆 心 角 为 6 的 圆 弧 ， 其 弧 长 为 6 (参考 图 1-3-5) 。 


一 


图 1-3-5 ”弧度 


因此 完整 一 周 的 角 就 可 以 用 半径 为 1 的 圆 (单位 圆 的 周 长 来 表示 。 圆 周 
长 计算 公式 为 2rr ， 一 周 的 周 长 为 2r x1=2r ， 也 就 是 一 周 的 角 的 弧度 值 。 


那么 ， 为 什么 计算 机 中 的 正弦 余弦 函数 不 使 用 看 上 去 比较 亲切 易 懂 的 角 
度 ， 而 用 了 看 来 不 够 直观 的 弧度 呢 ? 其 实在 近代 数学 中 ， 三 角 画 数 中 几乎 
都 使 用 弧度 ， 很 少 会 使 用 角度 。 之 所 以 使 用 弧度 而 不 是 角度 作为 角 的 度量 
单位 ， 主 要 是 关系 到 微 积分 的 一 些 问题 。 如 有 果 坚 持 不 使 用 弧度 的 话 ， 三 角 
范 数 中 与 微 积分 相关 的 一 些 公式 几乎 都 无 法 使 用 ， 还 可 能 会 引发 一 些 店 重 
的 问题 。 特 别 是 游戏 中 会 有 与 物理 相关 的 公式 ， 稍 复杂 的 情况 都 会 出 现 微 
积分 的 计算 ， 因 此 读者 朋友 们 在 程序 中 涉及 角 的 度量 时 ， 请 务必 使 用 弧度 
而 不 要 使 用 角度 。 如 有 果 在 一 个 程序 中 同时 使 用 弧度 和 角度 ， 就 会 非常 容易 
出 现 BUG 及 各 种 问题 ， 因 此 将 角 的 度量 单位 无 条 件 统一 为 弧度 这 一 原则 ， 
应 当 被 无 条 件 地 贯彻 下 去 。 


POINT ”请 将 角 的 单位 统一 为 弧度 。 
使 用 弧度 的 程序 


既然 提 到 了 弧度 的 话题 ， 就 来 写 个 小 程序 实践 一 下 吧 。Movement_3_1.cpp 
中 物体 每 次 出 现 都 会 同 同一 方向 运动 ， 这 里 做 一 个 小 修改 让 物体 每 次 出 现 


时 的 运动 方向 都 不 同 。 为 此 对 MoveCharacter 做 如 下 改动 ， 如 代码 清单 1-3- 
2 所 示 (Movement_3_1a.cpp 片段 ) 。 


代码 清单 1-3-2 使 用 弧度 让 物体 的 运动 方向 每 次 都 不 同 
(Movement_3_1a.cpp 片段 ) 


033 | int MoveCharacter( void ) // 每 帧 调用 一 次 
034 | { 

035 | x += vx; // 实际 运动 

036 | y += vy; 

037 | 

038 | // 运动 到 画面 外 时 回 到 初始 位 置 

039 | if ( (x < -CHAR WIDTH ) || ( x > VIEW WIDTH ) || 
040 | ( y < -CHAR HEIGHT ) || ( y > VIEW HEIGHT ) ) 

041 | { 

042 | x = ( float )( VIEW WIDTH - CHAR_ WIDTH ) / 2.0f; 
043 | y = ( float )( VIEW HEIGHT - CHAR_HEIGHT ) / 2.0f; 
044 | fAngle += 2.0f * PI / 10.0f; // 增加 角 的 弧度 
045 | If ( fAngle > ( 2.0f * PI ) ) fAngle -= 2.0f * PI; 
// 经 过 一 周 后 弧度 重 置 

046 | Vx = PLAYER VEL * cosf( fAngle ); 

047 | Vy = PLAYER VEL * sinf( fAngle ); 

048 | } 

049 | 

050 | return 0; 

051 | } 


这 个 程序 的 关键 点 在 于 物体 移出 画面 外 时 的 处 理 。 


044 | fAngle += 2.0f * PI / 10.0f; // 增加 角 的 弧度 


045 | if ( fAngle > ( 2.0f * PI ) ) fAngle -= 2.0f * PI; 
// 经 过 一 周 后 弧度 重 置 


1 
第 一 行 的 作用 是 ， 当 物体 移出 画面 时 使 运动 的 角 增 加 10 周 。 因 此 物体 出 现 
10 次 后 ， 运 动 方向 正好 经 过 了 一 周 。 


这 里 将 每 次 角 变 化 的 量 写 为 了 2.0f * PI/ 10.0f。 数 学 好 的 人 肯定 会 说 ， 与 其 
写成 2.0f * PI/ 10.0f， 直 接 写 成 PI/ 5.0f 不 是 更 简单 吗 ? 如 果 从 普通 的 数学 
题 的 角度 来 说 ， 这 确实 可 以 简化 为 PI1/ 5.0f。 但 是 这 里 其 实 是 有 意 而 为 之 
的 ， 因 为 这 样 的 写法 可 以 一 目 了 然 地 知道 每 次 角 增 加 的 量 是 一 周 的 几 分 之 
一 ( 换 句 话说 就 是 经 过 几 次 可 以 转 一 周 ) 。 书 写 为 2.0f* PI/10.0f 时 ， 不 用 
特别 计算 也 能 知道 27 为 一 周 ， 将 其 10 等 分 后 ，10 次 即 满 一 周 ， 而 如 果 是 
PI/ 5.0f， 就 需要 去 心算 ,一周 的 弧度 是 2x ，2r 除 以 PI/ 5.0f 是 多 少 等 等 ， 


一 点 也 不 直观 ， 理解 起 来 世 容 吻 生 问题 。 程序 代码 不 光 是 为 了 计算 机 ， 
更 要 考虑 读 代码 的 人 ， 因 此 这 里 特意 将 参数 写成 了 2.0f* PI/10.0f 。 


如 果 再 多 3 一 些 ， 写 成 (2.0f * PT) / 10.0f 的 话 是 不 是 更 友好 呢 ? 众 所 周 
知 ， 括 号 是 可 以 改变 运算 顺序 的 ， TT 
3.0f 的 结果 是 不 一 样 的 。 然 而 (2.0f * PD / 10.0f 与 2.0f * PI/ 10.0f 的 计算 结 
果 并 没有 什么 不 同 《这 里 暂 不 考虑 运算 精度 ) ， 因 为 (2.0f * PD /10.0f 与 
2.0f * PI/ 10.0f 的 运算 顺序 本 来 就 是 一 样 的 ， 对 于 计算 机 来 说 ， 怎 么 书写 都 
没有 什么 影响 。 但 是 如 果 写 成 (2.0f * PD / 10.0f，2.0f * PI 就 被 人 为 地 划分 
为 了 一 个 整体 ， 代 表 一 周 的 弧度 ， 对 于 人 类 来 说 则 更 加 容易 理解 ， 因 此 虽 
然 只 是 多 了 一 对 括号 ， 但 却 让 程序 更 加 自然 易 懂 了 。 


POINT ”编程 时 不 仅 要 考虑 到 计算 机 ， 还 要 考虑 到 读 代 码 的 人 。 
让 我 们 再 回 到 代码 。 请 大 家 看 一 下 程序 的 关键 部 分 的 第 2 行 。 


045 | If ( fAngle > ( 2.0f * PI ) ) fAngle -= 2.0f * pI; 
// 经 过 一 周 后 弧度 重 置 


一 句 有 什么 作用 呢 ? 如 注释 所 示 ， 这 行 语句 会 在 弧度 增加 到 比 一 周 大 
时 ee 周 后 义 回 
到 了 原 位 ， 其 代表 的 夹 角 方向 并 没有 改变 ， 从 数学 角度 来 说 ， 这 一 行 代码 
是 没有 任何 意义 的 。 -各 于 上 加 佑 将 且 有 痛 除 ， 至 少 在 区 不 程序 让 也 会 得 
到 相同 的 运行 结果 。 


那么 这 行 代码 真 的 只 是 摆设 吗 ? 并 不 是 这 样 的 。 这 行 的 意义 在 于 控制 角 的 
弧度 始终 在 0<0<2r 的 范围 内 ， 不 让 角 6 无 限制 地 增 大 下 去 。 确 实 从 数学 
角度 来 说 ， 角 9 无 论 多 大 ( 即 弧 度 增 加 若干 周 ) 都 没有 问题 。 比如 2r 、 47 


、6rr 全 部 表示 同样 的 角 ，2.5r 、4.5r 、6.5n...... 全 部 等 同 于 2 (90 
度 ) 的 角 。 数 学 中 一 个 角 无 论 多 大 都 不 会 有 问题 ， 而 实际 上 计算 机 用 一 个 
极 大 值 计算 正弦 余弦 时 却 可 能 出 问题 。 


因为 角 的 弧度 值 在 计算 机 内 部 是 以 浮 点 数 的 形式 表示 的 ， 即 形 如 1.2x10” 

这 种 指数 形式 的 数字 。 浮 点 数 只 用 很 少 的 位 数 (= 很 少 的 内 存 容量 ) ， 就 可 
以 表示 100 000 这 样 的 大 数 。 与 此 相对 ， 浮 点 数 存 在 计算 绝对 值 较 大 的 数 和 
会 丢失 精度 的 问题 。 比 如 计算 10 与 计算 100 000， 计 算 误差 会 相差 一 万 

倍 。 因 此 计算 机 在 计算 含有 小 数 点 的 数字 时 ， 会 受到 绝对 值 较 大 的 数 的 影 
啊 丢 失 精 度 。 如 有 果 轻 视 上 面 的 问题 ， 程 序 在 循环 中 一 次 次 增加 弧度 时 ， 随 
着 循环 次 数 的 增多 ， 弧 度 增 大 到 某 个 值 之 后 精度 就 会 开始 丢失 ， 最 终 程序 
运行 的 结果 可 能 会 与 预期 完全 不 一 样 。 因 此 除非 有 特殊 需要 ， 我 们 在 编程 


时 都 要 注意 避免 产生 一 个 极 大 的 弧度 值 。 此 外 ， 计 算 机 的 三 角 函 数 在 处 理 
一 个 很 大 的 弧度 值 时 ， 其 运算 时 间 也 可 能 会 加 长 ， 这 里 就 不 再 具体 论证 
We 能 地 控制 6 的 取 值 范围 在 0<0<2r (或 者 -r<0< 区 


POINT “计算 机 计算 不 可 避免 的 会 有 误差 ， 绝 对 值 越 大 误差 也 越 大 。 
因此 应 该 尽 可 能 地 使 用 绝对 值 小 的 数字 进行 计算 。 


1.4 在 物体 运动 中 加 入 重力 
ken Word 


抛物 运动 、 重 力 加 速度 、 计 算 误差 、 积 分 


RANK/normal 前 半 部 分 RANK/hard 二 半 部 分 


在 现实 世界 中 ， 物 体会 受到 重力 向 下 的 作用 力 。 本 节 就 让 我 们 来 学 习 如 何 将 重 
力 应 用 到 游戏 世界 中 ， 让 运动 表现 得 更 加 真实 吧 。 


本 小 节 中 ， 我 们 将 讲解 如 何 通过 给 物体 施加 重力 来 更 加 真实 地 表现 物体 的 弹跳 
等 运动 。 物 体 在 重力 作用 下 的 运动 称 为 抛物 运动 ，Movement_4_1.cpp 为 将 抛物 
运动 简单 地 用 编程 语言 编写 出 来 的 示例 程序 。 


图 1-4-1 抛物 运动 的 程序 
其 中 最 关键 的 是 MoveCharacter 中 的 以 下 2 行 。 


930 | y += Vy; // 对 位 置 加 入 速度 
031 | Vy += GR; // 为 速度 加 上 加 速度 


其 中 vy 是 物体 在 y 方向 的 速度 ，GR 为 重力 加 速度 。 所 谓 重力 加 速度 ， 即 做 抛 
物 运动 的 物体 被 施加 的 加 速度 。 为 了 进行 下 面 的 加 速度 相关 的 话题 ， 首 先 来 确 
认 一 下 速度 与 加 速度 的 关系 。 速 度 可 以 表达 为 


并 移动 中 离 
到 “时间 


所 以 移动 距离 其 实 就 是 位 置 的 变化 量 ， 可 将 其 写成 Ax ， 和 希腊 字母 A 代表 其 标记 
的 值 为 变化 量 。 同 理 ， 时 间 也 等 同 于 时 刻 的 变化 量 ， 将 其 书写 为 At。 那么 速度 
v 就 可 以 表达 为 


这 是 位 置 与 速度 的 关系 式 ， 其 实 这 个 关系 式 也 适用 于 速度 和 加 速度 。 假 设 加 速 
度 为 a ， 速 度 的 变化 量 为 Av ， 则 有 


由 上 面 的 式 子 可 以 知道 ， 每 单位 时 间 位 置 的 变化 量 是 速度 (根据 式 (D) ， 每 单 
位 时 间 速 度 的 变化 量 是 加 速度 (根据 式 (2) 。 那 么 将 上 面 的 等 式 再 做 一 下 变 
形 ， 就 可 以 得 到 


AT= vAt 
太 休 二 在 和 二 


时 间 At 的 单位 为 帧 ， 在 一 般 的 游戏 中 ，1 次 循环 经 过 的 时 间 为 1 帧 ， 即 At=1。 
全 入 下 二 售 到 


而 由 于 Ax 是 x 的 变化 量 ,假设 当前 的 x 为 x, ， 上 一 个 x 为 x,.1， 则 有 


同 理 ，Av 是 v 的 变化 量 ,， 假设 当 前 的 v 为 v, ， 上 一 个 v 为 vn,.1 ， 同 样 有 


AV=Vn -Vnl 


那么 式 (3) 就 可 以 表示 为 
Tn— Tn-l1=VU 


Un — Un-—l1 三 4 


然后 将 xn. 全 vn.1 移 项 到 右边 ， 得 到 


Tn 一 Tn-l TU 


Un = Vn-1Ta 


将 上 式 中 的 x 置 为 y ，a 置 为 GR， 就 得 到 了 程序 中 的 语句 。 只 是 单 任 上 面 的 讲 
解 理解 起 来 可 能 有 点 难 ， 请 仔细 观察 程序 的 运行 以 帮助 理解 。 


自然 界 中 的 物体 都 会 受到 重力 作用 而 产生 向 下 的 加 速度 ， 这 个 加 速度 的 值 是 固 
定 的 ， 程 序 中 的 常数 GR 就 表示 该 加 速度 。GR 的 值 在 每 帧 都 会 被 加 到 vy 变量 
中 ， 所 以 y 方 向 的 速度 vy 会 逐 帧 增加 ， 像 0、GR、2GR、3GR...... 这 样 ， 每 帧 
都 会 增加 GR， 同 时 每 次 增加 的 速度 还 会 被 加 到 位 置 y 中 去 ， 这 样 最 终 程 序 运行 
的 结果 就 是 带 有 加 速度 的 抛物 运动 了 。 

需要 注意 的 是 这 里 我 们 用 到 的 重力 加 速度 GR， 并 不 是 自然 界 中 平时 使 用 的 值 
9.8。 众 所 周知 的 重力 加 速度 值 9.8 是 真实 的 地 球 上 的 重力 加 速度 ， 以 m/s ” ( 米 
/平方 秒 ) 为 单位 ， 并 不 能 在 计算 机 的 虚拟 空间 中 适用 。 计 算 机 所 使 用 的 重力 加 
速度 单位 是 特殊 的 dot /F ” (像素 / 平方 帧 ) ， 请 注意 区 别 。 

。 抛物 运动 在 斜 抛 中 的 应 用 


入 下 来 ， 让 我 们 将 所 物 运动 从 平 抗 扩 展 到 全 手 。 为 此 将 niCharacer 而 数 


// y 方 向 的 初始 位 置 
// y 方 向 的 初始 速度 


y = 200.0f; // yy 方向 的 初始 位 置 
vy = -10.0f; // y 方 向 的 初始 速度 


物体 被 各 上 抛 出 后 ， 在 重力 作用 下 会 改变 运动 方 同 ， 变 为 同 下 挥 落 。 这 与 
游戏 中 角色 进行 跳跃 的 动作 是 一 致 的 ， 可 以 类 推 到 很 多 场景 中 。 


那么 到 此 是 不 是 就 可 以 结束 了 呢 ? 很 遗憾 还 不 能 。 我 们 到 目前 为 止 得 出 的 
结论 ， 对 于 那些 物体 运动 不 是 至 关 重 要 的 程序 来 说 是 足够 用 的 ， 比 如 业余 
时 间 制 作 的 游戏 中 角色 的 动作 ， 或 者 大 量 粒子 飞溅 的 效果 (particle) 等 。 
但 如 琳 是 用 于 商业 游戏 ， 特 别 是 动作 比重 非常 大 ， 如 动作 游戏 中 角色 的 运 
动 ， 上 面 的 结论 是 有 缺陷 的 。 


写 了 这 么 半天 ， 结 果 却 说 得 出 的 结论 有 人 缺陷， 可 能 会 有 读者 感到 不 满 吧 。 
其 实 所 谓 的 缺陷， 并 不 是 说 我 们 之 前 的 结论 是 错误 的 ， 只 是 告诉 读者 上 面 
的 结论 中 存在 不 够 准确 的 部 分 。 如 果 用 更 接近 数学 上 的 语言 来 说 ， 就 是 在 
之 前 的 一 些 算式 中 ， 只 是 粗糙 地 使 用 了 近似 值 ， 经 过 很 长 时 间 之 后 计算 绪 
条 可 能 会 变 得 不 准确 。 有 具体 来 说 ， 比 如 


NS 


NS 


人 


.移动 距离 
速度 一 时 间 


这 一 部 分 。 这 个 算式 小 学 生 应 该 都 学 过 的 吧 ， 那 么 有 些 思维 严谨 的 骇 子 会 
不 会 多 想 一 些 问 题 呢 ? 比如 : 分 母 为 时 间 ， 但 如 果 加 速 的 话 ， 这 段 时 间 内 
有 速度 也 会 改变 ， 这 样 一 来 上 而 的 守 式 个 古 束 有 问题 [ 吗 ? 臣 的 ， 有 这 样 
的 疑问 一 点 也 不 奇怪 。 因 为 上 面 的 等 式 中 要 计算 的 速度 ， 本 来 就 会 根据 计 
算 时 所 取 的 时 间 的 不 同 而 变化 。 而 这 个 “速度 = 距离 /时 间 ” 的 等 式 ， 也 只 

在 速度 恒定 时 才 成 立 ， 有 加 速度 时 就 不 正确 了 。 有 加 速度 时 ， 就 必须 考虑 

到 在 At 这 段 有 限 的 时 间 内 ， 速 度 也 是 不 断 变 化 的 (参考 图 1-4-2) 。 


速度 


加 速 的 情况 


匀速 的 情况 


时 间 


图 1-4-2 ”匀速 与 加 速 时 经 过 相同 时 间 后 产生 的 差异 


在 有 加 速度 时 ， 无 论 取 At 时 间 前 的 速度 ， 还 是 取 At 时间 后 的 速度 ， 用 上 面 
的 算式 计算 出 的 某 时 刻 的 位 置 都 是 不 正确 的 ， 因 为 速度 是 在 不 断 变化 的 。 


那么 在 有 加 速度 时 怎样 正确 地 计算 位 置 呢 ? 我 们 需要 更 改 一 下 思考 方式 。 
设想 有 无 限 小 的 时 间 ， 然 后 将 所 有 在 无 限 小 的 时 间 内 行进 的 距离 (距离 也 
是 无 限 小 的 ) 都 加 起 来 就 可 以 了 。 也 开赴 党 ， 我 们 最 终 会 将 无 数 个 无 限 小 
的 数 加 起 来 〈 听 起 来 有 些 像 哲学 上 的 问答 ) 。 当 然 计 算 机 是 无 法 处 理 无 限 
小 的 数 的 ， 也 不 可 能 真 的 去 将 无 数 个 数 相 加 。 , 所 以 在 实际 的 程序 中 都 是 
0 


uk 


可 能 很 多 读者 已 经 明白 了 ， 这 个 所 谓 的 将 无 数 个 无 限 小 的 数字 相 加 的 操 
作 ， 在 数学 上 称 为 积分 。 是 的 ， 就 是 有 名 的 微 积 分 中 的 积分 。 听 到 微 积 
分 ， 可 能 不 少 人 都 会 多 少 有 些 抵触 情绪 吧 。 其 实 包 括 我 目 己 都 不 太 想 去 磁 
及 ， 但 十 为 了 达到 目的 ， 也 只 好 人 硬 厦 头 皮 上 了 。 因 为 积分 正好 可 以 解决 被 
施加 了 重力 的 状态 下 的 问题 。 不 过 好 在 这 里 并 不 会 涉及 微 积分 比较 深入 的 
部 分 ， 如 果 想 比较 深入 地 学 习 微 积分 ， 少 则 也 要 花 两 三 年 时 间 吧 。 我 们 的 
目的 不 是 要 成 为 数学 家 ， 而 是 要 制作 游戏 ， 所 以 只 要 贺 图 否 开 地 学 会 使 用 
伟大 先哲 们 总 结 出 的 公式 就 可 以 了 。 

假设 位 置 为 x、 速 度 为 v、 加 速度 为 a、 经 过 时 间 为 +， 将 会 有 以 下 关系 式 


成 立 


r= /ud 
"= att 


这 里 出 现 的 1 ， 是 本 数 fe) 关于 变量 x 的 不 定 积分 。 对 这 部 分 知识 
不 够 了 解 的 读者 ， 可 以 参考 第 6 章 。 


让 我 们 回 到 刚才 的 话题 ， 在 已 经 论证 过 的 等 式 
Ax=vAt 


中 加 入 无 限 小 的 概念 。 由 于 上 例 中 y 方向 上 被 施加 了 GR 的 重力 加 速度 ， 因 
此 将 GR 表示 为 G， 则 有 


w= | cu 
由 后 一 个 式 子 可 以 得 到 
y= /cu 
=- Gt+cl 


C 1 称 作 积分 常数 ， 代 表 t=0 这 一 时 刻 的 速度 ， 也 就 相当 于 物体 的 初始 速度 
。 而 由 前 一 个 式 子 = 可 以 得 到 


凡尘 f ua 


Gt + C1)dt 


GE 二 CE 二 Co 


I | 一 
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C >， 这 个 积分 常数 ， 是 t=0 时 的 y 坐标 ， 即 物体 的 初始 位 置 。 我 们 最 终 得 到 
的 这 个 式 子 ， 可 能 看 过 大 学 数学 课本 的 人 都 会 有 点 印象 ， 其 实 这 就 是 使 用 
积分 所 推导 出 的 结果 。 

那么 与 使 用 积分 的 正确 方法 相 比 ， 我 们 一 开始 采用 的 通过 循环 在 位 置 中 县 


加 速度 ， 并 在 速度 中 县 加 加 速度 的 方法 ， 究 竟 有 多 大 的 偏差 呢 ? 简单 起 
见 ， 我 们 将 初始 速度 和 初始 位 置 都 置 为 0， 那 么 在 使 用 积分 的 方法 中 的 等 式 


让， 
y 一 GE 十 Ci 十 Co 


中 ， 就 相当 于 C ,=0、C ,= 0， 得 到 


T 
y=3Gt 


而 在 循环 中 每 次 释 加 一 个 数字 ， 这 在 数学 上 叫 作 级 数 。 比 如 t 时 刻 的 速度 
v 可 以 写成 


=Gt 


到 目前 为 止 ， 两 种 方法 计算 速度 的 结果 还 是 一 样 的 。 但 是 很 遗憾 ， 之 后 计 
算 位 置 y 时 结果 就 不 正确 了 。 


y 


y= Dvy 


i=1 
t 

>_ Gi es 
i=] 


在 上 式 中 ， 之 所 以 将 Gt 表示 为 了 G (i-1)， 是 因为 y 在 加 了 v 之后， 由 于 
需要 给 w 加 上 加 速度 ， 计 算 y 时 所 使 用 的 w 的 更 新 被 延 后 了 1 次 。 于 是 有 


t 
y= >》 G(i—1) 
i=] 


ps 
0 
1 


| 
~ -GGt 
2 2 


相 比 使 用 积分 时 正确 的 计算 结 采 ， 


1 
y = 3G 


1 
结果 中 少 了 -2 。 也 就 是 说 ， 对 位 置 琶 加 速度 ， 再 对 速度 到 加 加 速度 这 一 
简单 算法 ， 在 程序 中 随 着 时 间 的 推进 ， 误 差 会 变 得 越 来 越 大 。 如 果真 正 的 
游戏 中 出 现 了 这 种 误差 ， 游 戏 的 玩家 很 可 能 会 认为 游戏 有 问题 ， 甚 至 会 听 
到 这 样 的 抱 奶 : “这 个 角色 的 动作 有 问题 啊 ， 移 动 起 来 总 是 差 了 3 个 像素 ， 
真是 个 烂 游戏 ! ” 


上 - 面 的 例子 可 能 有 点 吹 毛 求 疲 ， 但 是 如 果 忽 视 这 小 小 的 误差 真 的 会 造成 很 
多 问题 。 比 如 网 球 、 高 尔 夫 球 、 棒 球 等 球 类 比赛 中 球 的 运动 总 是 至 关 重 要 
的 ， 球 的 旋转 以 及 空气 摩 探 的 影响 等 因素 都 必须 考虑 在 内 ， 如 果 有 误差 就 
可 能 会 影响 球 的 运动 轨迹 。 在 动作 游戏 中 ， 误 差 会 引起 帧 速率 不 固定 ， 可 
能 会 使 运算 结果 无 法 重 现 ， 例 如 因 运 算 时 机 受到 误差 影响 而 丢掉 一 帧 的 运 
算 。 此 外 有 多 台 机 器 同时 开发 一 个 游戏 时 ， 如 果 不 注意 误差 ， 就 会 出 现 配 
置 好 的 机 器 和 配置 差 的 机 器 的 帧 速率 不 一 致 的 情况 。 而 计算 机 的 运算 速度 
也 不 是 恒定 的 ， 必 须 保 证 运算 时 间 有 变化 时 物体 运动 的 速度 也 不 受 影响 。 
如 果 帧 速率 无 法 保证 ， 昌 然 每 一 帧 的 计算 误差 极 小 ， 但 最 终 表现 出 的 差异 
会 很 怀 人 ， 有 时 候 甚 至 会 让 物体 彻 克 侦 离 运动 轨道 ， 特 别 是 在 动作 游戏 
中 ， 一 点 微小 的 动作 偏差 都 会 影响 游戏 性 ， 最 终 演变 成 大 问题 。 因 此 为 了 
保证 计算 的 精度 ， 硕 望 大 家 尽 可 能 地 在 程序 中 使 用 积分 进行 运算 。 


使 用 积分 制作 的 抛物 运动 程序 


使 用 积分 实现 的 抛物 运动 程序 ， 请 参考 示例 程序 中 的 Movement_4_1b.cpp。 
在 该 程序 的 MoveCharacter 函数 中 ， 


， 洲 向 的 位 置 
* GR*t*t+vVvy* t+ 200,0f; 阔 向 的 位 置 


这 一 部 分 是 应 用 积分 计算 的 结果 求 x 方 向、y 方 向 的 位 置 。 如 果 用 通常 的 算 
式 写 出 来 束 是 


TT 二 Vt 


1 ， 
1 一 -i + vt + 200 


这 个 程序 的 特点 是 ， 只 需要 知道 物体 运动 过 程 中 的 具体 时 刻 ， 就 可 以 直接 
算出 物体 的 位 置 。 这 样 处 理 能 够 使 误差 不 会 随 着 时 间 慢 慢 增 大 ， 所 以 即使 
帧 速率 不 国定 ， 物 体 也 可 以 沿 同一 轨道 行进 。 不 过 使 用 积分 算法 的 程序 
Movement 4 _1b.cpp， 与 使 用 县 加 算法 的 程序 Movement_4_1a.cpp 相 比 ， 用 
肉眼 应 该 无 法 看 出 什么 区 别 ， 可 以 实际 运行 两 个 程序 对 比 一 下 。 


那么 是 不 是 使 用 上 面 的 积分 来 精确 计算 轨道 就 万 无 一 失 了 呢 ? 很 遗憾 这 是 
不 可 能 的 。 如 有 果 地 球 上 只 有 重力 一 种 力 的 话 还 没什么 问题 ， 但 是 物体 运动 
往往 会 受到 多 个 复杂 的 力 的 共同 作用 ， 想 精确 求 得 物体 每 一 个 瞬间 的 轨道 
几乎 是 不 可 能 的 ， 这 种 情况 下 只 能 根据 数据 计算 物体 近似 的 运动 轨道 。 


1.5 物体 随机 飞溅 运动 


一 


Ke Word 
0 随机 数 、 均 匀 随 机 数 、 正 态 分 布 wnormal 前 


半 部 分 RANK/hard 后 半 部 分 


本 小 节 将 实现 大 量 物体 随机 飞溅 的 效果 。 随 机 飞溅 虽然 是 常见 的 现象 ， 但 实现 
起 来 却 没 那么 容易 哦 。 


本 小 节 中 ， 让 我 们 来 学 习 大 量 物体 以 随机 初速 度 飞 溅 的 运动 。 比 如 火山 喷发 、 
烟花 、 摩 探 进出 的 火花 等 状况 都 可 以 套用 这 种 运动 。 由 于 物体 飞溅 运动 其 实 也 
0 所 以 建议 大 家 掌握 1.4 节 中 抛物 运动 的 程序 后 ， 再 来 阅读 本 
小食 。 


A 


y 


py 


图 1-5-1 物体 随机 飞溅 运动 的 程序 


将 物体 随机 飞溅 运动 程序 化 之 后 的 示例 程序 为 Movement_5_1.cpp。 这 个 程序 的 
重点 是 如 何 产生 随机 的 初速 度 ， 具 体 是 以 下 4 行 代码 清单 1-5-1) 。 


代码 清单 1-5-1 产生 随机 速度 的 部 分 (Movement_5_1.cpp 片段 ) 


Balls[i].vx = rand() * VEL _ WIDTH / ( float )RAND_MAX 


075 


| 
076 | - VEL_WIDTH / 2.0f; // 随机 设置 vx 的 初始 值 
077 | Balls[il].vy = rand() * VEL_HEIGHT / ( float )RAND_MAX 
978 | - VEL_HEIGHT / 2.0f - BASE_VEL; // 随机 设置 vy 的 初始 值 


为 了 理解 这 两 行 代码 ， 首 先 就 需要 理解 如 何 产 生 一 个 从 0 到 n 范围 内 的 随机 
数 。 在 这 个 程序 中 ， 为 了 获得 0~n 的 随机 数 ， 使 用 了 以 下 算法 。 


rand() * n / ( float )RAND_MAX 


为 什么 这 样 就 可 以 得 到 0~n 的 随机 数 呢 ? 这 需要 先 明 白 RAND_MAX 常数 代表 
什么 。 读 过 一 遍 示 例 程 序 就 可 以 发 现 ，RAND_MAX 常数 在 这 个 程序 中 并 没有 
定义 ， 而 是 事先 在 C 语言 等 的 头 文件 中 定义 好 的 ， 代 表 rand 画 数 所 能 返回 的 最 
大 值 。 所 以 rand0y(float JRAND_MAX 这 个 语句 就 可 以 得 到 0 到 1 之 间 的 随机 
数 。 而 rand() *n/(float )RAND_MAX 是 将 0 到 1 之 间 的 随机 数 再 乘 以 n ， 因 
此 结果 就 可 以 得 到 从 0 到 的 随机 数 。 


既然 rand() / (float )RAND_MAX 得 到 的 古 从 0 到 1 的 值 ， 那 么 将 获得 从 0 到 n 
的 随机 数 的 程序 写成 


(rand() / ( float )RAND MAX ) * n 


不 是 更 容易 理解 吗 ? 这 里 之 所 以 写成 rand() * n/(float )RAND_MAX， 是 因为 考 
虑 到 如 果 是 整 型 ， 就 可 以 首先 计算 (rand0 * m) 的 整 型 乘法 ， 这 样 在 速度 上 会 
更 有 保证 。 如 果 不 小 心 将 上 面 的 语句 更 改 为 


(rand() / RAND MAX ) * n 


(rand() / RAND_MAX) 部 分 进行 计算 时 小 数 点 以 后 的 部 分 就 会 被 全 部 舍弃 ， 导 
大 部 分 结果 都 是 0， 程序 也 就 失去 原 有 的 意义 了 。 


可 能 有 编程 经 验 的 读者 会 想到 使 用 求 余 的 方式 。 确 实 ， 获 得 0~n 的 随机 数 时 ， 
用 求 余 运算 是 比较 普 志 的 方式 ， 如 下 所 示 。 


rand()% (n+1) 


其 中 % 代表 求 余 运算 符 ， 上 面 的 语句 的 效果 征 ， 无 论 rand 函数 生成 的 随机 数 的 
范围 是 多 少 ， 只 要 将 其 产生 的 随机 数 除 以 n +1D)， 束 可 以 得 到 0~ 的 随机 数 。 
比如 用 上 述 方 法 生成 0~3 的 随机 数 时 ，rand 的 返回 值 如 表 1-5-1 所 示 。 


表 1-5-1 rand 函数 的 返回 值 以 及 最 终结 果 


A pp 1 pp hp pa 
B 0 1 2 司 0 1 2 3 0 


Ai: rand 函数 的 返回 值 ”B: rand0O % (3 + 1) 的 值 


江 


使 用 这 个 方法 确实 可 以 将 rand 函数 的 返回 值 归纳 为 0~n 的 随机 数 。 那 么 为 什么 
我 们 没有 采用 这 种 方式 去 编写 之 前 的 示例 程序 呢 ? 这 是 有 者 干 原因 的 。 其 中 最 
重要 的 原因 是 ， 采 用 求 余 的 方式 获得 的 随机 数 必 然 只 能 是 整数 。 因 为 所 请 “ 求 

余 ”"， 就 是 在 整数 范围 内 取得 一 个 余数 。 然 而 在 示例 程序 中 ， 如 果 将 速度 的 x 分 
量 和 y 分 量 都 设置 为 整数 ， 回 同一 方 癌 飞溅 的 物体 丈 会 又 然 增 多 ， 导 致 效果 显 
得 很 不 自然。 对 此 有 兴趣 的 读者 可 以 将 上 面 的 4 行 代码 做 如 下 变更 
(Movement_5_1a.cpp) 


Balls[i].vx = ( rand() % ( VEL WIDTH + 1 ) ) 
- VEL_WIDTH / 2.0f; 
Balls[Iilj,vy= ( rand() % ( VEL_HEIGHT + 1 ) ) 


- VEL_HEIGHT / 2.0f - BASE_VEL， 


虽然 这 种 写法 很 简单 ， 但 通过 运算 结果 就 可 以 发 现 ， 向 正 上 方 飞溅 的 物体 增多 
了 ， 具 有 同样 速度 的 物体 也 增多 了 ， 看 起 来 多 多 少 少 显得 不 够 自然 。 


再 来 看 示例 程序 Movement_5_1.cpp 中 计算 vx 的 地 方 。 


975 | rand() * VEL_WIDTH / ( float )RAND_MAX 
976 | - VEL_WIDTH / 2.0f; // 随机 设置 vx 的 初始 全 


程序 会 首先 产生 从 0 到 VEL_WIDTH 的 随机 数 ， 然 后 减 去 VEL_WIDTH / 2.0f， 

最 终 就 产生 了 -VEL_WIDTH /2.0f 到 VEL _ WIDTH /2.0f 范围 内 的 随机 数 。 由 于 
一 般 物 体 随机 同上 飞溅 时 ， 我 们 都 希望 向 左 方向 与 向 右 方向 产生 的 飞溅 效果 是 

oi ， 因 此 这 里 使 正 负 值 以 相同 的 概率 产生 。 同 理 ， 对 vy 的 计算 也 采用 同样 
YY 加 区 


rand() * VEL_HEIGHT / ( float )RAND_MAX 
- VEL_HEIGHT / 2.0f - BASE VEL; // 随机 设置 vy 的 初始 全 


之 所 以 这 样 设置 ， 是 因为 在 火山 喷发 等 场景 中 ， 通 过 设置 一 个 平均 速度 为 基础 


速度 ， 然 后 使 所 有 的 物体 飞溅 都 在 基础 速度 上 再 随机 加 上 一 个 加 速度 a ， 从 而 
就 可 以 让 整体 效果 显得 更 加 真实 。 此 时 产生 的 随机 数 范围 是 (-BASE_VEL - 
VEL_HEIGHT /2.0f) 到 (-BASE_VEL+VEL_HEIGHT/2.0f)。 


按照 上 面 的 思路 ， 不 难 想象 我 们 可 能 会 经 常用 到 一 个 功能 ， 即 产生 从 a 到 b 的 
随机 数 。 为 此 ， 我 们 可 以 把 这 个 功能 提炼 成 画 数 ， 通 过 此 画 数 来 产生 指定 范围 


内 的 随机 数 。 此 时 随机 数 的 计算 公式 如 下 所 示 。 


rand() * (b-a)/ ( float )RAND MAX + a 


请 读者 自行 确认 之 前 的 计算 vx 与 vy 的 式 子 是 否 满足 该 公式 。 


。 为 什么 会 感到 不 目 然 


- 面 我 们 制作 了 一 个 限制 随机 数 范围 ， 让 物体 随机 向 上 飞溅 的 程序 ， 但 是 
有 些 人 可 能 会 感觉 其 运行 结果 有 些 不 自然 。 其 实 这 个 程序 中 的 随机 数 的 产 
生 方 式 ， 与 自然 界 中 真正 的 物体 飞溅 现象 相 比 、 是 有 很 大 不 同 的 。 当 然 ， 

目 自然 卉 中 物体 飞溅 的 方向 是 3D 的 ， 这 是 其 中 一 个 原因 ， 然 而 更 重要 的 原因 
自然 界 中 这 种 情况 下 的 初速 度 分 布 并 不 是 均匀 随机 数 ， 而 是 满足 正 态 
A 下 面 就 依次 说 明 什 么 是 均匀 随机 数 和 正 态 分 布 。 


首先 说 明 均 匀 随 机 数 。 所 请 均匀 随机 数 ， 是 指 所 有 数字 的 出 现 概率 都 相等 
的 随机 数 ， 也 就 是 之 前 程序 使 用 rand 画 数 所 产生 的 随机 数 1。 使 用 均匀 随 
人 正 上 方 的 概率 与 其 他 方向 的 概率 都 是 相同 


而 所 谓 正 态 分 布 ， 征 指 随机 数 中 有 一 个 值 取 得 的 概率 最 大 ， 其 他 值 取得 的 
概率 比较 小 ， 具 体 来 说 ， 正 态 分 布 可 以 表示 为 


] (z 一 1 
PT) = — exp 
V2T02 20° 


其 中 4 代表 均 数 ， 即 最 高 概率 出 现 的 点 ，o 则 称 为 标准 差 ， 表 示 概 率 分 散 
的 程度 (参考 图 1-5-2) 。 


多 


图 1-5-2 正 态 分 布 的 图 像 
以 目 i re 火山 岩 会 以 最 高 的 概率 向 某 个 特定 方向 喷 溅 


(一 般 是 正 上 方 ) 


向 其 他 方向 喷 流 的 概率 较 低 。 而 在 Movement_5 3 


4 由 于 我 们 役 有 限制 速度 0 速度 在 所 有 方向 上 的 取 值 都 是 


概率 的 ， 因 此 看 上 去 就 会 觉得 不 太 自 


那么 如 到 我 们 从 目 然 界 中 学 习 ， 让 速度 满足 正 态 分 布 ， 物 体 的 运动 会 不 会 


变 得 自然 一 些 呢 ? 各 


答案 当然 是 肯定 的 。 但 是 想 要 在 程序 中 实现 均 数 为 1、 


标准 差 为 o 的 正 态 分 布 却 不 是 一 件 容易 的 事 。C 语言 中 并 没有 提供 一 个 方 
便 的 函数 可 以 直接 生成 满足 正 态 分 布 的 随机 数 ， 我 们 只 能 基于 产生 均匀 随 


机 数 的 rand 函数 ， 


通过 有 目 


己 的 计算 来 实现 。 但 是 如 有 果 要 自己 琢磨 计算 方法 


念 怕 很 有 难度 ， 因 此 我 们 需要 仰 仗 一 下 先贤 的 稼 茵 。 
Box-Muller 算法 是 一 种 能 根据 均匀 分 布 的 随机 数 来 产生 正 态 分 布 的 随机 数 


的 算法 。 根 据 Box-Muller 算法 ， 假 设 a、b 是 两 个 服从 均匀 分 布 并 且 取 值 


范围 为 从 0 到 1 的 随机 数 ， 我 们 束 可 以 通过 下 面 的 公式 获得 两 个 满足 正 态 
分 布 ( 均 数 为 0， 标 准 差 为 1) 的 随机 数 Z1 和 2Z，。 


Z1 = V —21n(a) cos(27b) 


Za = V—21n(a) sin(276) 


等 式 中 的 In(x ) 代表 自然 对 数 函数 ， 即 以 e (=2.71828...) 为 底 的 对 数 函 数 。 


F 式 对 应 的 图 像 是 在 半径 为 V-2 Ita) 的 圆 上 取 随 机 角度 的 点 ， 点 的 x 坐标 


为 Z1 ，y 坐标 为 Z，。。 为 什么 这 样 的 Z| 和 2 ,会 满足 正 态 分布 呢 ?详细 说 
明 起 来 会 比较 复 洒 ， 也 超出 了 本 书 的 范围 ， 因 此 在 此 略 过 。 总 之 大 家 只 要 
将 Z1; 和 2Z1 作为 两 个 没有 任何 相关 性 的 随机 数 去 使 用 束 可 以 了 。 


将 上 式 实现 为 程序 ， 即 示例 程序 Movement_5_2.cpp。 这 个 程序 首先 会 生成 
0 0 1 的 满足 正 态 分 布 的 随机 数 ， 并 通过 下 面 的 方式 限制 随 
范围 


代码 清单 1-5-2 限制 利用 正 态 分 布 生成 的 随机 数 的 范围 


078 | Balls[i].vx = ( fRand_r * cosf( fRand t ) ) * VEL_WIDTH; 
// 随机 设置 vx 的 初始 值 


079 | Balls[il].vy = ( frRand_r * sinf( fRand t ) ) * VEL_HEIGHT - 
BASE_VEL ; // 随机 设置 vy 的 初始 什 


与 之 前 程序 中 使 用 的 均匀 随机 数 不 同 的 是 ， 在 这 段 程序 中 ， 例 如 vx 的 取 值 
范围 没有 被 限制 在 -VEL_WIDTH /2.0f 到 VEL WIDTH /2.0f 之 间 ， 即 速度 
超过 此 范围 的 物体 也 会 偶尔 出 现 。 这 样 ， 我 们 最 终 就 实现 了 自然 界 中 的 随 
机 现象 一 一 正 态 分 布 。 


1 严格 讲 ，rand 画 数 所 产生 的 随机 数 只 能 称 为 “ 伪 随 机 数 "， 并 不 一 定 是 真 了 
过 将 0~RAND_MAX 范围 内 的 值 转换 为 a~b 范 范围 内 的 值 这 一 处 理 后 ， 时 多 
所 偏差 ， 但 由 于 对 程序 的 影响 较 小 ， 因 此 直接 忽略 了 。 


1.6 ”让 物体 进行 圆周 运动 


FE 意义 上 的 均匀 随机 数 ， 只 是 经 
然 结 果 可 能 会 和 均匀 随机 数 有 


ken Word 邮 
角速度 、 向 心力 RANK/normal 前 半 部 分 


RANK/hard 后 半 部 分 


在 本 小 节 ， 我 们 将 实现 使 物体 以 一 点 为 中 心 进行 旋转 的 圆周 运动 。 
下 面 就 让 我 们 来 学 习 如 何 让 物体 围绕 一 个 中 心 点 做 圆周 运动 吧 。 


图 1-6-1 物体 围绕 中 心 点 旋转 的 程序 


将 运动 简单 程序 化 后 的 示例 程序 为 Movement_6_1.cpp。 这 个 程序 中 ， 重 点 部 分 
是 MoveCharacter 中 的 以 下 3 行 。 


代码 清单 1-6-1 使 物体 围绕 中 心 点 旋转 的 程序 的 主要 部 分 


x = ROT_R * cosf( fAngle ) + ( VIEW WIDTH - CHAR_ WIDTH ) / 2.0f; 
y = ROT_R * sinf( fAngle ) + ( VIEW HEIGHT - CHAR_HEIGHT ) / 


fAngle += 2.0f * PI / 120.0f; // 增 大 角度 


这 里 并 没有 考虑 物体 运动 中 的 速度 和 加 速度 的 情况 (如 重力 作用 ) ， 而 是 直接 


计算 了 物体 的 位 置 。 具 体 来 说 ， 是 基于 以 下 原理 计算 的 。 首 先 根据 三 角 函 数 的 
正弦 余弦 定义 有 
TIT= cost 


y=sing 


在 一 个 以 原点 为 中 心 的 单位 圆 ( 半径 为 1 的 圆 ) 上 上， 根据 角度 9 就 可 以 表示 一 个 
点 的 位 置 (参考 图 1-6-2) 。 


图 1-6-2 三角 画 数 的 定义 


如 果 上 式 中 9 的 值 随 时 间 递 增 ， 就 会 形成 以 原点 为 中 心 半径 为 1 的 圆周 运动 
(参考 图 1-6-3) 。 


图 1-6-3 ”伴随 时 间 进 行 的 圆周 运动 


将 这 个 圆 的 半径 乘 以 ， 并 将 原点 设置 为 ko ，y0 )， 那 么 围绕 着 ko ，y 0 ) 的 
半径 为 > 的 圆周 运动 就 为 
工 王 7 . Cos 日 十 T0 


一 7r':sn0 十 0 
于 是 就 有 了 程序 中 的 以 下 两 行 。 
x= ROT R* COS{( fAngle )+(VIEW_WIDTH -CHAR_WIDTH )/ 2.0f; 


y= ROT_R * sinf( fAngle )+ ( VIEW_HEIGHT - CHAR_HEIGHT ) /2.0f; 


卫 外 ， 


fAngle += 2.0f * PI / 120.0f; 


行 决定 了 物体 的 旋转 速度 。 在 物理 学 中 表示 物体 的 旋转 速度 时 常 使 用 角 束 


这 一 
度 。 角 速度 一 般 写 作 @ ， 可 以 表示 为 6 =ot 。 那 么 角速度 就 满足 等 式 ”一 
即 单位 时 间 内 角度 的 变化 量 。 


使 用 角速度 w 计算 虽然 方便 ， 但 是 究竟 多 长 时 间 才 能 旋转 一 | 


0 为 此 就 有 了 周期 了 的 概念 , ““ 开 即 “ 
， 经 过 时 间 了 了 后， 物体 正好 旋转 一 周 (2n = 单位 国 的 图 周 攻 正好 是 了 时 间 


所 经 过 的 角度 ) 。 因 此 示例 程序 中 每 次 为 角度 fAngle 增加 120 ， 就 用 120 帧 的 
时 间 (2 秒 ) 完成 了 一 周 圆周 运动 。 


用 上 面 的 方法 ， 可 以 在 不 考虑 加 速度 的 情况 下 ， 很 简单 地 算出 物体 的 x 坐标 与 y 
坐标 。 而 如 果 是 速度 中 包含 了 加 速度 的 圆周 运动 应 当 如 何 计算 呢 ? 比如 系统 
需要 同时 处 理 重 力 与 空气 阻力 ， ， 或 者 处 理 个 完 整 的 圆周 运动 (例如 游戏 中 角色 
使 用 绳索 从 一 处 荡 到 男 一 处 ) 等 "在 这 些 情 况 下 ， 如 果 还 只 是 简单 地 对 位 置 累 
加 速度 ， 对 速度 累加 加 速度 ， 其 结果 肯定 不 是 = 圆周 运动 。 此 时 为 了 让 物体 仍然 
呈现 圆周 运动 ， 我 们 要 如 何 处 理 加 速度 呢 ? 


这 里 需要 先 参考 一 下 1.4 节 后 半 部 分 中 的 这 两 个 等 


T 一 fa 
二 f aa 


这 是 当 施 加 的 加 速度 确定 时 ， 求 速度 与 位 置 的 计算 公式 。 圆 周 运动 则 正好 相 
反 ， 是 需要 根据 确定 的 位 置 来 算出 加 速度 ， 所 以 只 要 把 上 面 的 等 式 逆 运算 就 可 
以 了 。 而 积分 的 逆 运 算 ， 就 是 大 家 都 知道 的 微分 。 那 么 根据 位 置 计算 速 度 ， 根 
据 速 度 计算 加 速度 ， 就 有 以 下 等 式 成 立 。 


dz 
dt 
du 

dt 
使 用 这 两 个 等 式 ， 束 可 以 计算 出 圆周 运动 的 加 速度 。 首 先 仅 考虑 x 方 品 ， 假 设 
物体 正在 以 原点 为 中 心 、 以 r 为 半径 、 以 o 为 角速度 进行 圆周 运动 ， 此 时 x 方 
向 旋转 满足 等 式 


Uv 一 


X=r: cos (wt) 


然后 计算 x 方向 的 速度 w ， 


dz 
下 


下 和 cos{w t)} 


Uz 
dt 


= 一 rw : sin(wt) 


根据 w ， 就 可 以 计算 出 x 方向 的 加 速度 ov。 


一 人 - Ti * SIn (wt)} 


» | 
= coslwt) 


上 上 面 的 式 子 与 原来 的 x 坐标 的 计算 公式 


X=r: cos(wt) 


相 比 ， 由 于 两 边 都 含有 r 与 cos(ot)， 因 此 可 以 得 到 下 面 的 关系 等 式 。 


as=-O“X 


可 以 看 出 ， 为 了 以 原点 为 中 心 做 圆周 运动 ， 内 需 将 当前 前 的 x 坐标 乘 以 -w* 的 结 
0 x 方 向 的 加 速度 即 可 。 请 注意 cos 及 sin 等 三 角 函 数 在 计算 中 已 经 被 消去 


接 下 来 用 同样 的 方式 计算 y 坐标 ， 有 


y =7: sin(wt) 


dy 
dt 


i 
= —{r .sin(wt 
jt sin(wt)} 


一 7rw Cos(wt) 


Vy 二 


fr cos[wt)} 
dt 
三 rw - Sin{(wt) 


,2 
.Uy =—wWyYy 


同样 可 以 看 到 ， 三 角 芳 数 都 锌 消去 了 。 整 理 一 下 a 、a, 的 结果 ， 有 


(2 
从 向 量 的 角度 来 重新 审视 一 下 上 面 的 等 式 ， 可 以 得 出 这 样 一 个 结论 ， 即 将 物体 


参 1-6-4 


\ 


各 心力 


图 1-6-4 位置 向 量 在 加 速度 作用 下 进行 圆周 运动 

等 式 中 的 负 号 ， 表 示 被 施加 的 加 速度 (或 力 ) 是 始终 指向 原点 即 旋 转 的 中 心 方 
向 的 。 于 是 我 们 就 可 以 得 出 结论 ， 即 对 物体 施加 一 个 指向 某 一 点 的 角速度 为 @ 
的 力 ， 物 体 就 会 围绕 该 点 做 圆周 运动 。 由 于 这 个 力 始 终 指向 旋转 的 中 心 ， 因 此 
称 为 癌 心力 。 使 用 向 心力 实际 制作 的 圆周 运动 程序 请 参考 示例 程序 


Movement 6 _2.cpp。 


0 
以 下 部 分 


代码 清单 1-6-2 使 用 向 心力 的 圆周 运动 中 决定 初始 位 置 及 初始 速度 的 部 分 


a 


rx = ROT_R; // 初始 位 置 
ry = 0.0f，; 

vx = 0.0f; // 初始 速度 
Vy = ROT_R * ANGLE_VEL， 


可 以 看 到 初始 位 置 为 (ROT_R, 0.0f)， 即 or , 0) 的 位 置 ， 初 始 速度 为 (0.0f， 
ROT_ R* ANGLE_VEL)， 即 (0, ro )。 为 什么 要 这 样 设 置 呢 ? 这 是 因为 姑 果 想 要 
围绕 某 个 初始 位 置 做 圆 周 运动 ， 首 先 必须 将 物体 放 在 圆周 的 某 个 点 上 才 行 。 于 
是 将 t=0 代入 刚才 的 公式 


T=7T:Cos(wt) 


y =7: sin(wt) 


Ea (r , 0) 束 是 初始 位 置 。 其 次 ， 只 要 将 t=0 代入 对 x、y 进行 微分 得 到 的 关 
及 工 


Ur = 一 rw * sin(wt) 


Uy = TW : COS{wt) 


就 可 以 得 到 初始 速度 (0, ro )。 


由 于 上 面 的 算式 中 已 经 将 三 角 画 数 全 部 消去 了 ， 因此 这 个 程序 中 控制 物体 实际 
运动 的 MoveCharacter 函数 中 并 没有 使 用 sin、cos 等 二 角 函 数 进 行 运 算 ， 只 是 简 
单 地 使 用 了 加 法 乘法 等 ， 而 最 终 效果 与 使 用 了 三 角 而 数 的 圆周 运动 是 完全 一 样 
的 。 实 际 上 sin、cos 等 运算 比 简单 的 四 则 运算 要 耗 时 很 多 ， 因 此 使 用 向 心力 实 
现 的 圆周 运动 ， 比 使 用 三 角 画 数 实现 的 圆周 运动 在 运算 速度 方面 更 胜 一 筹 。 


巡 上 所 述 ， 我 们 掌握 了 两 种 在 游戏 中 实现 圆周 运动 的 方法 ， 一 种 基于 三 角 丽 
数 ， 男 一 种 则 使 用 了 向 心力 ， 大 家 可 以 根据 具体 情况 选择 使 用 恰当 的 方法 。 


1.7 [ 进 阶 ] 微分 方程 式 及 其 数值 解法 


y 


Rap 和 rd RANK/hard 
微分 方程 、 数 值 解法 、 欧 拉 法 i 


在 使 用 计算 机 表现 物体 运动 时 ， 运 动 是 否 正确 是 受 条 件 限 制 的 。 在 本 小 节 ， 我 
们 就 来 一 起 了 解 下 这 种 限制 存在 的 原因 吧 。 


本 章 围绕 着 物体 运动 这 一 话题 ， 编 写 了 不 少 表现 物体 运动 的 程序 实例 。 然 而 计 
算 机 终究 只 是 一 种 在 有 限 的 时 间 内 进行 计算 的 机 器 ， 它 所 能 正确 表现 的 物体 运 
动 自然 是 有 限 的 。 那 么 为 什么 会 有 这 些 制 约 条 件 呢 ? 本 人 小节 就 会 对 此 进行 说 
明 。 首 和 完 从 基本 原理 开始 ， 当 一 个 物体 被 施加 力 时 ， 该 物体 束 会 产生 与 所 施加 
的 力 成 比例 的 加 速度 。 用 公式 表达 就 是 


F=ma 


F 代表 物体 被 施加 的 力 ，m 是 物体 的 质量 ，a 是 物体 产生 的 加 速度 。 这 就 是 有 名 
的 运动 方程 牛顿 第 二 定律 ) 。 从 这 个 公式 中 可 以 得 到 
F 


而 我 们 在 1.6 节 中 已 经 介绍 过 ， 位 置 、 速 度 、 加 速度 之 间 有 以 下 关系 。 


忆 一 


进而 得 到 


d /dz 
| 
d2z 


~ de 


d2rz 
等 式 中 的 dt 代表 将 位 置 以 时 间 进 行 2 次 微分 。 将 其 代入 之 前 的 运动 方程 式 ， 
可 以 得 到 


diz F 


di mm 
这 种 等 式 中 含有 微分 的 方程 称 为 微分 方程 。 如 果 能 将 这 个 描述 物体 运动 的 微分 
方程 求解 ， 理 论 上 来 说 就 可 以 重 现任 何 力 作用 下 的 物体 运动 。 


然而 要 将 这 个 看 似 简 单 的 算式 求解 ， 也 不 是 那么 容易 的 。 首 先 让 我 们 来 考虑 最 
简单 的 情况 。 在 这 种 情况 下 ， 只 在 微分 方程 两 边 对 t 进 行 2 次 积分 就 可 以 求解 ， 
比如 1.4 节 中 只 对 物体 施加 重力 就 属于 这 种 情况 。 下 面 我 们 就 来 实际 操作 一 下 ， 
给 物体 施加 重力 加 速度 g ， 即 mg 的 力 ， 这 时 有 


2 
dr mg 
dt m 
了 
dz 


“a 王公 


然后 在 等 式 两 边 对 上 进行 积分 ， 由 于 微分 是 积 分 的 逆 运 算 ， 所 以 左边 的 微分 被 消 
去 一 次 ， 得 到 


上 式 中 ，C 0 是 左右 两 边 的 积分 常数 的 和 。 对 上 式 再 次 进行 积分 ， 得 到 


到 二 2g 十 Cot 十 C1 
C1 是 两 边 的 积分 常数 。 这 个 式 子 与 1.4 节 中 我 们 推导 出 的 等 式 一 致 。 
但 是 在 现实 中 几乎 没有 人 会 像 这 样 对 运动 方程 两 边 进行 积分 求解 。 例 如 ， 根 据 
胡 克 定律 ， 具 有 弹性 的 物体 会 被 施加 一 个 名 为 -kx 的 力 。K 称 为 劲 度 系 数 ， 弹 
稼 越 便 劲 度 系数 越 大 。 此 时 上 式 为 


dz27 F 


dt2 m 

diz 一 大 工 

di 77 
这 个 式 子 束 无 法 简单 地 对 两 边 进行 积分 求解 x。 因 为 积分 求解 的 对 象 是 x ， 而 x 
在 等 式 右边 也 出 现 了 ， 即 使 对 两 边 进行 积分 ， 也 仅仅 是 将 等 式 从 微分 变 成 了 积 
分 ， 没 有 什么 实际 意义 。 下 面 来 实际 操作 一 下 。 


dz 大 
rd =- /( 二 f/: d+ Co) 
大 _ _ 
T= 一 一 (/: dd 十 Cnot 十 C1 
mJ \. 


求 得 的 结果 中 仍然 包含 x ， 无 法 解决 问题 。 针 对 上 式 ， 最 简单 的 解决 方式 是 换 
个 角度 ， 既 然 求解 2 次 微分 的 目的 是 消去 未 知 数 的 微分 或 积分 符号 ， 那 么 如 果 
有 一 个 函数 通过 2 次 积分 后 能 保持 不 变 就 可 以 解决 这 个 问题 了 。 比 如 sin 函数 束 
有 这 样 的 特性 ，sin 函数 进行 1 次 微分 后 会 变 成 cos 范 数 ， 再 次 进行 微分 又 会 变 
回 sn 芳 数 。 那 么 束 让 我 们 按 这 个 思路 来 试 试 这 个 方法 是 否 可 行 吧 。 首 先 ， 假 设 


T= A.:sin(wt) 


这 里 的 A 与 @ 痢 是 常数 。 然 后 对 等 式 进行 微分 。 顺 便 提 一 下 ， 下 面 的 求解 过 程 
与 1.6 节 中 对 圆周 运动 的 求解 过 程 几 乎 是 一 样 的 。 


T= A.:sin(wt) 
dz 
= Aw :cos{wt) 
dt 
dz 
dz 
dz27 2 


对 比 一 下 具有 弹力 的 物体 的 运动 方程 


d27 一 开工 


dt 77 


本 辣 f 
一 一 4u” :sinlwt) 


二 wi 


| 寺 


可 以 看 到 ， 如 果 ”页 ， 则 两 个 方程 是 一 至 的 ， 所 以 x= A sin(ot) 是 满足 此 运 


= | 


动 方程 的 。 即 “一 =V 元 ， 此 时 方程 的 解 为 


| =| 


上 了 
1 


T= A.:sin (# V 
如 琳 对 这 个 管 案 有 怀疑 ， 可 以 将 解 代入 运动 方程 实际 验证 一 下 是 否 真 的 成 立 。 
不 过 比 起 之 前 求解 用 的 普通 方程 ， 微 分 方程 的 求解 过 程 总 是 让 人 感觉 不 够 工 
整 ， 就 连 最终 求 出 的 解 也 像 是 东 拼 西 次 出 来 的 。 


上 面 推导 出 了 满足 市 弹 得 的 物体 的 运动 方程 的 解 ， 但 是 需要 注意 的 是 这 个 运动 


~ 


人 
方程 并 不 是 只 有 这 一 个 解 。 .我们 所 求 出 的 “一 (a Vn De 式 只 是 满足 
该 运动 方程 的 一 个 解 ， 并 不 能 否定 其 他 解 存在 的 可 能 性 , 实际 上 也 可 能 会 得 到 
其 他 形式 的 解 ， 本 书 中 不 再 深入 谈论 。 


上 文中 我 们 介绍 了 运动 方程 的 两 种 解法 : 对 等 式 两 边 积 分 以 及 利用 三 角 画 数 。 
那 公 所 有 的 运动 方程 是 不 是 都 可 以 通过 这 两 种 方法 求解 呢 。 很 遗憾 这 是 做 不 到 
的 。 微 分 方程 可 以 分 为 线性 微分 方程 与 非 线性 微分 方程 两 种 。 上 面 的 例子 中 ， 
重力 的 等 式 与 弹 自 的 等 式 都 是 线性 微分 方程 。 数 学 家 人 研究 得 出 的 结论 是 ， 线 性 
人 而 非 线性 微分 方程 会 存在 一 些 无 论 如 何 都 无 法 求解 的 
情况 。 


举 一 个 游戏 开发 者 身边 的 例子 ， 这 个 例子 涉及 流体 力学 的 情况 。 比 如 挥动 一 面 
旗帜 ， 这 时 的 运动 就 不 能 通过 简单 的 函数 来 表示 。 在 这 些 情 况 下 ， 我 们 就 需要 
使 用 微分 方程 的 数值 解法 ， 即 牺牲 了 一 定 程度 的 正确 性 的 数值 计算 。 实 际 上 1.4 
广 中 最 开始 的 程序 以 及 本 章 的 很 多 问题 都 已 经 在 使 用 这 种 方法 了 ， 只 不 过 之 前 


的 所 有 算法 ， 都 仅仅 采用 了 数值 解法 中 最 简单 的 、 误 差 最 大 的 算法 。 具 体 来 
说 ， 就 是 在 欧 拉 法 中 将 At 置 为 1 的 解法 。 下 面 将 进一步 对 欧 拉 法 进行 说 明 。 


所 谓 欧 拉 法 ， 就 是 通过 逐步 计算 来 求 得 微分 方程 的 近似 解 。 这 里 的 “逐步 ?具体 
来 说 有 点 类 似 程序 中 的 循环 ， 根 据 前 一 次 的 计算 结果 来 进行 下 一 次 计算 。 在 求 
解 微分 方程 时 ， 如 果 想 要 得 到 最 精确 的 结果 ， 采 用 欧 拉 法 只 能 永 无 止境 地 计算 
下 去 ， 因 为 每 次 计算 都 只 能 得 到 当前 的 结果 。 因 此 对 于 复杂 的 非 线性 微分 方 
程 ， 想 要 精确 求解 本 来 就 是 不 可 能 的 ， 我 们 只 能 努力 求 得 某 个 可 以 接受 的 精度 
的 解 。 现 实 中 使 用 欧 拉 法 时 ， 虽 然 可 以 进行 多 次 逐步 求解 ， 但 往往 只 会 求 第 一 
次 近似 这 种 最 简单 的 近似 解 ， 也 就 是 将 微分 方程 近似 为 差分 方程 来 求解 。 具 体 
来 说 就 是 以 下 的 近似 过 程 。 


首先 ， 位 置 x 与 速度 v 之 间 本 来 就 有 
dz 
dt 

这 样 的 关系 。 这 个 等 式 的 左边 是 微分 ， 如 果 想 要 通过 速度 计算 位 置 ， 原 本 是 必 

须 进 行 积 分 的 。 但 是 在 欧 拉 法 中 可 以 近似 为 
AT 
At 


二 人 


二 


l 
这 里 的 Ar 是 时 间 间隔 (在 游戏 中 就 是 1 帧 = 本 0 秒 ) ，Ax 是 在 At 时 间 内 位 置 x 
的 变化 量 。 也 就 是 说 ，Ax 其 实 就 是 现在 的 位 置 减 去 前 一 次 的 位 置 。 假 设 将 现在 
的 位 置 表示 为 x, ， 前 一 次 的 位 置 表示 为 xn ; ， 上 面 的 等 式 就 可 以 表示 为 


Zn 一 mn 一 1 


At 


妈 

Tn = Tn_1+vAt 
同 理 ， 速 度 与 加 速度 的 关系 为 

Un 一 1 十 QAt 


将 两 个 式 子 并 列 起 来 得 到 联合 方程 组 


Tn = Tal 十 ?At 
Un = Un_1+aAt 


人 
yw 或 V1。 


在 上 面 使 用 过 的 近似 等 式 


AT 
At 


| 左边 就 直接 转化 为 了 微分 ， 也 就 不 是 近似 了 。 用 等 式 可 
上 


— 


, Az dz 
lim 一 一 = 一 一 
At—0 At dt 


也 就 是 说 ， 欧 拉 法 的 等 式 
Tn 一 Tn_l 十 TDAt 
Un = Un_1+aAt 
在 使 用 第 一 次 近似 时 可 能 会 采用 较 粗 略 的 计算 ， 但 其 实 如 果 At 足够 小 的 话 ， 其 


计算 精度 也 会 上 升 。 而 在 本 章 的 1.4 节 中 也 提 到 过 ， 游 戏 中 及 全 把 区 拉 丑 的 和 
式 中 的 At 设置 为 1， 即 


这 样 计算 所 使 用 的 时 间 间 隔 误 变 为 了 1 帧 ， 即 1/60 秒 。 在 物体 被 施加 了 加 速度 

的 情况 下 ， 这 样 计算 所 产生 的 误差 是 无 法 被 忽视 的 。 即 便 如 此 ， 很 多 游戏 中 也 

并 不 会 去 要 求 更 高 的 计算 精度 ， 因 为 此 时 物体 的 动作 肉眼 观察 起 来 并 不 会 感到 

奇怪 ， 这 就 足够 了 。 但 如 果 是 球 类 游戏 等 对 物体 运动 的 正确 性 要 求 很 高 的 话 ， 

a 1 就 显得 精度 不 足 了 。 此 时 为 了 提高 精度 ， 一 般 有 以 下 三 个 方 
@ 使 用 精度 更 高 的 高 阶 近似 求解 微分 方程 ， 比 如 龙 格 - 库 塔 法 (Runge- 


Kutta methods) 等 。 


@ 使 用 线性 多 步 法 (Linear multistep method) 计算 ， 即 不 光 使 用 前 一 次 的 
值 ， 还 使 用 前 两 次 或 更 早 的 值 进行 计算 ， 比 如 Adams-Bashforth 法 等 。 


@ 在 一 帧 内 多 次 使 用 欧 拉 法 计算 ， 缩小 At 。 
方法 Qj) 是 偏重 理论 、 数 学 层面 的 方法 。 无 论 是 使 用 龙 格 - 库 塔 法 或 者 更 高 阶 的 近 


似 (如 4 阶 ) ， 在 同样 的 时 间 间 隔 At 内 都 能 得 到 比 欧 拉 法 更 好 的 精度 ， 这 也 是 
在 模拟 实验 时 第 使 用 的 方法 。 但 是 实际 上 在 使 用 龙 格 - 库 塔 法 时 ， 代 码 的 可 维护 


人 


性 会 下 降 ， 因 为 龙 格 - 库 塔 法 在 理论 上 要 比 欧 拉 法 复杂 很 多 ， 如 果 不 是 高 校 物理 
专业 的 人 可能 很 难 运用 月 如 。 向 龙 格 - 库 培 法 同时 还 自在 委 多 版 本 的 算法 ， 可 能 
造成 混乱 。 因 此 如 果 代 码 需 要 让 自己 以 外 的 人 (比如 对 物理 不 够 熟悉 的 人 ) 
维护 ， 考虑 到 代码 的 可 维护 性 ， 应 当 慎 重 考虑 是 否 真 的 需要 采用 龙 格 - 库 塔 法 。 


方法 @ 的 Adams-Bashforth 法 理论 上 比 龙 格 - 库 塔 法 略 简 单一 些 ， 也 没有 那么 多 
不 同 版 本 的 算法 ， 代 码 可 维护 性 会 好 一 些 。 但 是 毫 无 疑问 还 是 要 比 欧 拉 法 复 
杂 ， 在 使 用 时 也 需要 射 酌 。 


方法 @3) 采 用 的 是 容易 理解 的 欧 拉 法 ， 从 程序 的 可 维护 性 上 来 说 应 该 是 最 好 的 方 
人 比如 将 欧 拉 法 等 式 的 At 设 为 0.1， 进 行 10 次 循环 ， 就 可 以 很 简单 地 得 到 高 
情 度 的 运算 结果 ， 而 在 时 间 精 度 提 高 的 同时 ， 其 他 物体 的 运动 是 否 正 确 也 变 得 
。 虽然 这 样 做 可 能 会 花费 更 多 的 计算 时 间 ， 但 是 现在 的 计算 机 性 
能 都 非常 高 ， 游 戏 中 比 起 物体 运动 的 计算 等 ， 演 染 其 实 更 加 消耗 时 间 ， 因 此 个 

人 认为 如 果 游 戏 中 需要 高 精 度 的 物理 计算 ”不 要 去 使 用 龙 格 - 库 塔 法 或 者 
Adams-Bashforth 法 ， 重 复 使 用 欧 拉 法 就 是 最 好 的 方法 。 因 此 这 里 不 再 列举 龙 格 
- 库 塔 法 及 Adams-Bashforth 法 的 详细 公式 ， 对 这 些 高 级 方法 有 兴趣 的 读者 ， 不 
妨 自 己 去 深入 研究 一 下 。 


第 2 章 卷 动 


2.1 “将 育 景 从 一 问卷 动 到 另 一 端 

2.2 ”让 背景 卷 动 与 角色 的 运动 产生 联动 
2.3 ” 卷 动 由 地 图 块 组 合 的 地 图 

2.4 ”波纹 式 的 摇 探 卷 动 

2.5 ”制作 有 纵深 感 的 卷 动 


2.6 [ 进 阶 ] 透视 理论 


2.1 将 背景 从 一 端 卷 动 到 男 一 端 


Ke Word 
0 镜头 位 置 、 卷 动 幅度 、 比 例 关系 wwessy 前 半 


部 分 RANK/normal 后 半 部 分 


早期 的 游戏 基本 上 只 有 一 个 画面 ， 而 现在 的 游戏 中 用 一 个 以 上 的 画面 作为 背景 
已 经 成 为 标 配 。 本 小 节 就 让 我 们 一 起 学 习 如 何 制 作 基 本 的 背景 卷 动 吧 。 


本 小 市 将 讲解 如 何 将 背景 图 片 从 一 冲 卷 动 到 男 一 端 。 为 了 便于 说 明 ， 这 里 只 使 

用 一 张 插画 作为 背景 ， 而 不 使 用 背景 卷 动 中 常见 的 地 图 块 (map chip) 方法 〈 即 

人 人 人 人 Se 
a 


示例 程序 Scroll 1_1.cpp 就 是 一 个 将 图 片 从 一 端 卷 动 到 另 一 端的 程序 。 代 码 有 点 
长 ， 其 中 最 重要 的 是 以 下 部 分 (代码 清单 2-1-1) 。 


代码 清单 2-1-1 背景 卷 动 处 理 的 主要 部 分 (Scroll_ 1_1.cpp 片 段 ) 


| int InitBack( void ) // 只 在 程序 开始 时 调用 


= VIEW WIDTH / 2.0f; // 镜头 的 初始 位 置 
VIEW WIDTH / 2.0f - fcamera x; // 背景 的 初始 位 置 


fCamera_ x 
fBack_x = 


return 0O; 


MoveBack( void ) 每 帧 调用 一 次 


// 按 左 方向 键 时 向 左 卷 动 
if ( GetAsynckKeyState( VK_LEFT ) ) { 
fCcamera x -= CAMERA VEL; 
if ( fCamera x < VIEW WIDTH / 2.0f ) { 
fcamera x = VIEW WIDTH / 2.0f; 
} 
} 


// 按 右 方向 键 时 向 右 卷 动 
if ( GetAsyncKeyState( VK_RIGHT ) ) { 
fCcamera x += CAMERA VEL; 
If ( fCcamera x > ( float )( PICTURE_ WIDTH - VIEW_ WIDTH / 2.0f 


fcamera x = ( float )( PICTURE WIDTH - VIEW WIDTH / 2.0f 


} 


fBack_x = VIEW_WIDTH / 2.0f - fcamera_x; // 背景 的 位 置 


return 0O; 


其 InitBack E | ( 视 挟 ) 的 位 置 ( 即 变 量 fCamera x) 及 背景 图 
片 的 显示 位 置 ( 即 变 量 fBack_x) 。 变 量 fCamera x 控制 的 是 背景 图 片 的 哪 一 部 
分 正在 被 看 到 ( 即 部 片 的 坐标 ) 。 上 面 程序 中 将 视线 焦点 设置 为 了 画面 中 

心 。fBack_x 控制 的 是 绘制 背景 图 片 左 端的 x 坐标。 因此 在 InitBack 函数 中 ， 
0 就 为 画面 宽度 的 一 半 的 坐标 ， 即 VIEW_WIDTH/2.0f 的 位 置 (参考 图 
2-1-2) “。 


背景 宽度 (PICTURE_WIDTH ) 


画面 宽度 (VIEW_WIDTH) 


镜头 位 置 (fCamera x) 
图 2-1-2 镜头 位 置 与 背景 显示 部 分 的 关系 
fBack_x 则 是 根据 fCamera x 得 到 的 。 


023 | fBack_x = VIEW_ WIDTH / 2.0f - fcamera x; // 背景 的 初始 位 置 


请 注意 镜头 和 背景 图 片 是 反方 向 运动 的 ， 镜 头 左 移 图 片 就 会 向 右 卷 动 ， 镜 头 右 


移 图 片 则 向 左 卷 动 。 因 此 程序 中 便 通过 XXX - fCamera_x 这 种 形式 ， 让 背景 可 以 
按 镜头 坐标 的 反方 向 运动 。 当 背景 图 片 的 x 坐 标 (fBack_x) 为 0 时， 镜头 正好 
在 画面 的 中 央 ， 此 时 x 坐标 的 位 置 为 VIEW_WIDTH /2.0f， 背 景 图 片 在 
VIEW_WIDTH / 2.0f -fCamera x 的 位 置 。 所 以 fBack_x 的 初始 值 为 
VIEW_WIDTH /2.0f- VIEW_WIDTH/2.0f= (0 参考 图 2-1-2) 。 也 就 是 说 ， 
卷 动 是 从 最 左 端 开始 的 。 


在 每 帧 调用 的 范 数 MoveBack 中 ， 根 据 键 弄 输 入 移动 育 景 。 首 先 来 看 按 左 方 加 
键 时 的 情况 。 


| // 按 左 方向 键 时 向 左 卷 动 
032 | if ( GetAsyncKeyState( VK_LEFT ) ) { 
033 | fCcamera x -= CAMERA VEL; 
| 
| 


031 


034 if ( fCamera x < VIEW WIDTH / 2.0f ) { 
035 fcamera x = VIEW WIDTH / 2.0f; 


代码 控制 镜头 以 CAMERA_VEL 的 速度 向 左 运动 ， 同 时 还 对 移动 范围 作 了 一 定 
的 限制 。 代 表 镜 头 的 x 坐标 的 fCamera _x 移动 到 VIEW_WIDTH/2.0f 即 画面 宽 
度 一 半 的 位 置 时 就 无 法 再 辐 左 移动 了 ， 因 为 镜头 的 x 坐标 移动 到 画面 宽度 一 半 
的 位 置 时 ， 背 景 的 左 端 也 正好 到 达 画 面 的 左 端 (参考 图 2-1-2) 。 这 与 InitBack 
函数 中 fCamera x 与 fBack X 之 阐 有 差 信息 同样 的 道理 o 


当 按 右 方 向 键 时 ，MoveBack 函数 的 处 理 如 下 。 


| // 按 右 方 向 键 时 向 右 卷 动 

039 | if ( GetAsyncKeyState( VK_RIGHT ) ) { 
| 
| 


040 fCamera x += CAMERA_VEL ， 

041 if ( fcamera x > ( float )( PICTURE WIDTH - VIEW WIDTH / 2.0f 
) ) I 

042 | fcamera x = ( float )( PICTURE WIDTH - VIEW WIDTH / 2.0f 
); 

043 | } 

044 | } 


镜头 将 以 CAMERA_VEL 的 速度 向 右 移动 。 与 向 左 时 同样 ， 这 里 也 对 移动 范围 


进行 了 限制 。 向 右 时 镜头 最 多 能 移动 到 背景 图 的 宽度 (PICTURE_WIDTH) 城 
去 画面 宽度 的 一 半 (VIEW_WIDTH /2.0f) 的 位 置 。 即 画面 的 右 端 与 背景 图 右 
端 重 琶 时 就 是 向 右 卷 动 的 极限 位 置 (参考 图 2-1-3) 。 
背景 宽度 (PICTURE WIDTH ) 


画面 宽度 


VIEW_WIDTH) 


镜头 位 置 C(fCamera x) 


PICTURE WIDTH — (VIEW_WIDTH/2.0f) 


图 2-1-3 画面 到 达 背 景 的 右 端 
es eh 背景 图 片 的 左边 和 右边 都 存在 一 块 镜 头 无 法 进入 的 区 


， 其 面积 为 四 宽度 的 一 半 。 这 是 由 于 画面 最 多 只 能 显示 宽度 为 
VIEW_WIDTH 的 图 像 ， 所 以 画 面 也 只 能 在 不 超出 背景 图 片 的 范围 内 移动 。 而 镜 
头 移动 的 范围 正好 比 背 景 图 片 的 宽度 少 一 个 画面 那么 宽 (具体 为 VIEW_WIDTH 
/2.0f+ 向 右 的 VIEW_WIDTH/2.0f) ， 因 此 如 果 背 景 图 片 正 好 与 画面 一 样 宽 ， 


则 将 无 法 卷 动 (参考 图 2-1-4) 


背景 宽度 


可 卷 动 的 幅度 
《背景 友 度 -画面 锅 度 ) 


图 2-1-4 当 背 景 宽度 与 画面 宽度 一 样 时 将 无 法 卷 动 
最 后 一 行 代码 


946 | fBack_x = VIEW_WIDTH / 2.6f - fcamera_x; // 背景 的 位 置 


是 通过 镜头 的 x 坐 标 fCamera_x 计算 背景 的 x 坐标 fBack_x， 计 算 方法 与 
InitBack 函数 中 计算 fBack_x 的 方法 一 样 。 


POINT 像 上 文 这 样 同 一 个 计算 过 程 在 多 个 地 方 使 用 上 时， 一 般 都 会 将 其 转 
化 为 函数 ， 以 避免 出 现 多 处 重复 代码 。 否 则 ， 当 之 后 进行 调试 或 遇 到 需求 
变更 等 情况 时 ， 就 要 一 处 一 处 地 修改 代码 ， 这 样 不 仅 会 导致 程序 的 可 维护 
性 变 差 ， 也 更 容易 出 错 。 但 是 ， 由 于 本 次 所 用 到 的 计算 都 非常 简短 ， 因 此 
与 其 写成 函数 放 在 别处 ， 不 如 直接 写 出 算式 更 加 具备 可 读 性 。 于 是 ， 上 例 
的 代码 在 同时 考量 了 代码 的 可 维护 性 与 可 读 性 后 ， 优 先 照顾 了 代码 的 可 读 
性 ， 在 两 个 地 方 写 了 同样 的 计算 语句 。 


。 多 重 卷 动 的 实现 


我 们 已 经 实现 了 从 一 端 到 男 一 端的 背景 卷 动 ， 为 了 让 卷 动 更 加 具备 立体 
感 ， 接 下 来 让 我 人 ] 来 实现 多 重 卷 动 。 


图 2-1-5 三 重 卷 动 程序 
示例 程序 Scroll_1_2.cpp 实现 了 3 个 图 片 重 琶 的 卷 动 效 果 ， 即 三 重 卷 动 程 
, 。 程序 中 最 重要 的 部 分 是 MoveBack 函数 中 的 以 下 3 行 (代码 清单 2-1- 
2 O 


代码 清单 2-1-2 ”多 重 卷 动 处 理 的 主要 部 分 (Scroll_1_2.cpp 片 段 ) 


047 | fBack_x1 = VIEW _ WIDTH / 2.0f - fCamera x; 

048 | fBack_x2 = ( float )( PICTURE_ WIDTH2 - VIEW WIDTH ) / ( 
PICTURE_WIDTH1 - VIEW WIDTH ) * fBack_x1; 

049 | fBack_x3 = ( float )( PICTURE WIDTH3 - VIEW WIDTH ) / ( 


PICTURE_WIDTH1 - VIEW WIDTH ) * fBack_x1; 


| 


其 中 fBack_x1、fBack_x2、fBack_x3 分 别 代表 外 侧 的 图 片 (图 1) 、 中 间 
的 图 片 (图 2) 、 里 侧 的 图 片 (图 3) 的 x 坐标。 可 以 看 出 ,与 之 前 只 有 一 
张 背 景 图 的 卷 动 程序 Scroll_1_1.cpp 相 比 ， 有 以 下 一 些 不 同 。 


。 外 侧 图 片 的 卷 动 处 理 与 只 有 一 张 背 景 图 的 程序 相同 。 


o 中 间 图 片 的 x 坐标 为 外 侧 图 片 的 x 坐标 乘 以 (PICTURE_WIDTH2 - 
VIEW_WIDTH) /(PICTURE_WIDTH1 -VIEW_WIDTH ) 。 


o 里 侧 图 片 的 x 坐标 为 外 侧 图 片 的 x 坐标 乘 以 (PICTURE_WIDTHS3 - 
VIEW_WIDTH) /(PICTURE_WIDTH1 - VIEW_WIDTH ) 。 


可 以 看 到 这 个 程序 是 以 外 侧 图 片 的 卷 动 为 基准 的 ， 其 他 图 片 的 运动 本 质 上 
都 是 与 外 侧 图 片 成 一 定 速度 比 例 的 联动 。 那 么 如 何 决定 这 些 图 片 卷 动 的 速 
度 比 例 呢 ? 如 果 从 最 终 呈 现 的 视觉 效果 来 考虑 ， 这 些 图 片 卷 动 的 速度 比 
例 ， 应 该 是 由 他 们 在 视觉 上 体现 的 纵深 程度 来 决定 的 。 但 是 在 示例 程序 
Scroll_1_2.cpp 中 ， 并 没有 根据 视觉 的 纵深 程度 去 编写 程序 ， 而 是 根据 每 张 
图 片 的 宽度 来 决定 其 卷 动 速度 的 。 图 片 的 宽度 越 大 卷 动 速度 越 快 ， 图 片 宽 
度 越 小 ， 对 应 的 卷 动 速度 也 会 降低 。 因 为 在 游戏 开发 中 ， 背 景 卷 动 的 速度 
设 定 一 般 取决 于 游戏 策划 或 设计 师 ， 但 是 他 们 却 很 难 给 出 一 个 具体 的 数 
据 。 这 种 情况 下 ， 通 过 按 示 例 程 序 这 样 处 理 ， 程 序 开发 就 只 需要 拿 到 背景 
图 片 就 可 以 开工 了 ， 从 而 不 仅 提升 了 开发 效率 ， 也 不 容易 出 BUG 。 


为 了 简化 说 明 ， 示 例 程 序 Scroll_1_2.cpp 中 将 每 张 图 片 的 宽度 用 define 进行 
了 硬 编码 ， 但 在 正式 项 目 中 ， 建 议 通 过 程序 读 取 图 片 的 宽度 ， 这 样 当 图 片 
J 卷 动 速度 也 会 自动 做 出 相应 的 更 改 ， 不 必 每 次 都 去 修改 程 
TR 


POINT 卷 动 速度 的 计算 应 该 参考 背景 图 片 的 宽度 ， 这 样 可 以 提高 程 
序 员 与 设计 师 之 间 的 沟通 效率 。 


既然 程序 是 根据 图 片 的 宽度 来 决定 卷 动 速度 的 ， 那 么 具体 怎样 通过 图 片 宽 
度 计算 出 卷 动 的 速度 比例 呢 ? 首 先 我 们 已 经 想到 ， 图 片 越 宽 卷 动 越 快 ， 图 
片 越 罕 卷 动 越 慢 ， 那 么 根据 图 片 宽 度 的 比例 调整 卷 动 速度 的 比例 是 不 是 就 
可 以 了 呢 ? 假设 基准 图 片 的 宽度 为 w 1 ， 联 动 的 图 片 宽度 为 w，， 基 准 图 片 
的 位 置 为 x1 ， 联 动 的 图 片 位 置 为 x， ， 根 据 比 例 计算 有 


Tl : TI = W!1 : WwW? 


瑟 


显然 是 不 正确 的 。 举 一 个 极端 的 例子 ， 比 如 联动 的 图 片 宽度 w , 正好 与 画面 
( 指 玩家 看 到 的 画面 ) 宽度 相等 会 怎样 呢 ? 此 时 按照 上 文 的 结论 ， 图 片 应 
该 是 无 法 郑 动 的 。 但 是 在 上 面 这 个 比例 关系 式 中 ， 图 斤 仍 然 会 以 非 零 的 速 
度 卷 动 ， 这 显然 是 有 问题 的 。 


为 了 正确 计算 卷 动 速度 ， 不 能 只 选择 图 片 的 宽度 ， 而 应 该 同时 使 用 图 片 宽 
度 与 画面 宽度 进行 计算 ， 从 而 得 到 卷 动 的 最 大 范围 。 如 果 仅 从 卷 动 本 刁 来 
考虑 的 话 ， 卷 动 的 最 大 范围 应 该 是 图 片 宽度 减 去 画面 宽度 所 得 到 的 值 〈( 参 
考 图 2-1-4) 。 那 么 如 果 画 面 宽度 为 wy ， 基 准 图 片 的 卷 动 范围 则 为 


1 一 Wy 
联动 图 片 的 卷 动 范围 为 
wa 一 Wy 


此 时 只 要 通过 计算 卷 动 范围 与 速度 的 比例 


wo 一 Wwy 
一 -一 :由 


了 Ta 一 T]1 

wl 一 IT 

忠 可 以 由 基准 图 片 的 位 置 计 算出 联动 图 片 的 位 置 。 上 面 的 等 式 中 ， 如 采 图 
片 的 宽度 w , 与 画面 的 视 度 wy 相等， 系数 的 分 子 w , - wy 为 0， 将 无 法 卷 
动 ， 符 合 我 们 的 预期 。 所 以 示例 程序 Scroll_1_2.cpp 中 使 用 了 以 下 算式 。 


048 | fBack_x2 = ( float )( PICTURE WIDTH2 - VIEW WIDTH ) / ( 
PICTURE_WIDTH1 - VIEW WIDTH ) * fBack_x1; 
049 | fBack_x3 = ( float )( PICTURE_ WIDTH3 - VIEW WIDTH ) / ( 


PICTURE_WIDTH1 - VIEW WIDTH ) * fBack_x1; 


可 见 ， 卷 动 的 基准 始终 是 图 1， 图 2、 图 3 的 显示 位 置 都 通过 上 壕 等 式 计算 


得 到 。 


当 画 面 上 有 多 个 不 同 速度 的 图 片 卷 动 时 ， 以 其 中 一 个 图 片 为 基准 ， 并 基于 
基准 图 片 来 控制 其 他 图 片 会 非常 方便 。 


2.2 ”让 背景 卷 动 与 角色 的 运动 产生 联动 


人 en Word 
区 域 坐 标 、 画 面 坐标 RANK/normal 


比 起 单纯 的 背景 卷 动 ， 如 果 背 景 能 与 游戏 角色 的 动作 产生 联动 ， 效 果 会 更 好 。 
在 本 小 节 ， 我 们 就 来 学 习 能 与 角色 的 动作 产生 联动 的 背景 卷 动 处 理 。 


本 人 小节 将 讲解 能 与 玩家 控制 的 角色 (下 文 简称 角色 ) 产生 联动 的 背景 卷 动 处 
理 。 在 游戏 中 ， 背 景 卷 动 大 怪 有 两 种 : ea 
动 ， 卷 动 与 角色 的 动作 基本 没有 关系 ， 男 一 种 更 加 普 裔 ， 比 如 在 动作 游戏 或 格 
斗 游戏 中 ， 卷 动 根据 角色 的 运动 进行 联动 。 


图 2-2-1 与 角色 运动 联动 的 背景 卷 动 程序 


与 角色 运动 联动 的 背景 卷 动 程序 如 Scroll 2_1.cpp 所 示 。 在 这 个 程序 中 ， 角 色 向 
右 移动 时 背景 同 左 卷 动 ， 角 色 癌 左 移动 时 背景 疝 右 卷 动 ， 据 此 来 尽 可 能 地 使 角 
色 定位 在 画面 中 央 。 也 就 是 说 ， 对 角色 的 操作 并 不 会 反 觅 在 角色 本 身 ， 而 是 表 
现 为 背景 的 卷 动 (参考 图 2-2-2) 。 这 与 上 一 小 节 的 处 理 是 差不多 的 (只 是 镜头 
视点 的 位 置 没有 角色 而 已 ) 。 


移动 的 不 是 角 向 右 移 动 操作 
色 而 是 背景 


图 2-2-2 根据 角色 操作 只 移动 背景 

但 是 这 样 处 理 就 元 法 使 角色 移动 到 背景 (这 里 也 可 以 称 作 区 域 1) 的 两 端 。 上 一 
节 中 已 经 讲 过 ， 这 是 由 于 背景 的 卷 动 范围 是 有 边界 的 。 而 我 们 可 以 通过 一 些 处 
理 ， 当 角色 移动 到 超出 背景 可 以 卷 动 的 范围 时 停止 背景 卷 动 ， 使 角色 继续 相对 
画面 移动 并 碰 到 两 端 (参考 图 2-2-3) 。 


| : 本 章 中 所 谓 的 区 域 是 指 背景 图 片 覆 盖 的 范围 ， 即 角色 能 移动 的 范围 。 


因 形 景 无 法 移动 
而 移动 角色 


图 2-2-3 背景 到 达 画 面 两 端 后 只 移动 角色 


实现 以 上 效果 的 关键 代码 请 参考 Scroll_2_1.cpp 中 MoveChara 函数 的 以 下 部 分 
(代码 清单 2-2-1) 。 


代码 清单 2-2-1 只 在 画面 两 端 移动 角色 (Scroll_2_1.cpp 片段 ) 


fCamera x = fchara sx; // 镜头 暂时 回 到 角色 的 位 置 

if ( fCcamera x < VIEW WIDTH / 2.9f ) { // 检查 镜头 的 左 移 边界 
fcamera x = VIEW_ WIDTH / 2.0f; 

} 


if ( fcamera_x > PICTURE_WIDTH - VIEW_WIDTH / 2.0f ) { // 检查 镜头 


fCcamera x = PICTURE_ WIDTH - VIEW_WIDTH / 2.0f; 


} 
fchara x = fchara_sx - fCamera x + VIEW WIDTH / 2.0f - 


CHARA_ WIDTH / 2.0f; 
056 | fBack_x = VIEW WIDTH / 2.0f - fCamera x; 


以 下 是 代码 中 涉及 的 坐标 : 
。 fCamera_x 为 区 域 中 镜头 的 x 坐标 
。 fChara_sx 为 区 域 中 角色 的 x 坐标 


。 fChara x 为 画面 上 角色 的 x 坐标 


。fBack_x 为 画面 上 背景 的 x 坐标 


这 里 同时 出 现 了 描述 角色 移动 范围 的 区 域 坐标 与 画面 坐标 两 个 概念 ， 请 注意 不 


ne 


混 消 。 按 代码 的 逻辑 ， 角 色 首 先 会 在 区 域内 移动 ， 此 时 与 镜头 没有 关系 ， 然 


后 镜头 才 会 追踪 角色 的 运动 。 因 此 画面 上 角色 的 坐标 是 通过 角色 与 镜头 在 区 域 


内 的 坐标 求 出 来 的 。 
为 了 使 镜头 追踪 角色 ， 代 码 做 了 以 下 处 理 。 


048 | fCcamera x = fchara_ sx; // 镜头 暂时 回 到 角色 的 位 置 


这 是 让 镜头 无 条 件 地 保持 与 角色 处 于 同一 位 置 ， 即 此 时 角色 与 镜头 正好 同 在 画 


面 的 中 央 。 但 是 如 前 所 述 ， 镜 头 比 角色 有 痢 更 加 严格 的 移动 限制 ， 


让 角色 始终 停留 在 画面 中 央 。 当 镜头 偏离 角色 的 位 置 时 ， 会 通过 以 下 方法 检 


镜头 是 否 超 过 了 左 方向 的 边界 


if ( fcamera x < VIEW_WIDTH / 2.9f ) { // 检查 镜头 的 左 移 边 界 


fcamera x = VIEW_ WIDTH / 2.0f; 


为 了 让 背景 不 超出 画面 ， 必 须 使 镜头 到 达 从 背景 图 片 左 端 起 到 画面 宽度 的 一 半 


位 置 时 就 不 再 移动 (参考 图 2-1-2) ， 当 镜头 超过 该 边界 时 就 将 其 重 置 回 该 位 
同 理 也 会 对 镜头 是 否 超出 右边 办 做 如 下 检查 ， 并 目 在 必要 时 修正 镜头 位 


if ( fCamera_x > PICTURE_WIDTH - VIEW_WIDTH / 2.0f ) { // 检查 镜头 


fCcamera x = PICTURE WIDTH - VIEW WIDTH / 2.0f; 


经 由 上 述 处 理 ， 镜 头 就 会 尽 可 能 地 保持 角色 在 画面 中 央 ， 实 在 无 法 实现 时 ， 则 


将 角色 尽量 显示 在 靠近 中 央 的 位 置 。 
县 确定 了 角色 位 置 本 镜头 位 置 ， 就 可 以 计算 出 角色 在 画面 


Sl Rs 


计算 实际 上 是 代码 的 以 下 部 分 。 


055 | fchara x = fChara_ sx - 
CHARA_WIDTH / 2.0f， 


fCcamera x + VIEW WIDTH / 2.0f - 


目 先 能 决定 角色 在 画面 上 的 位 置 的 
示 从 镜头 看 到 的 角色 的 相对 位 置 ， 


是 fChara_sx - fCamera x 这 一 部 分 。 这 个 值 表 
当 镜 头 正好 与 角色 位 置 一 致 时 ， 这 个 值 为 0。 


将 这 个 相对 位 置换 算 为 实际 的 画面 


上 的 坐标 时 ， 就 要 利用 镜头 与 角色 位 置 重合 


时 角色 正好 位 于 画面 中 央 这 一 特性 


fCamera XxX 为 0， 因 此 通过 加 上 画 
到 画面 中 央 的 坐标 了 。 这 样 一 来 就 
身 也 有 一 定 的 大 小 ， 角 色 坐 标 是 从 
角色 正确 地 显示 在 画面 中 央 ， 还 要 


。 由 于 镜头 与 角色 重合 时 fChara_sx - 

宽度 的 一 半 VIEW_WIDTH / 2.0f， 就 可 以 得 
得 到 了 和 角色 在 画面 上 的 坐标 ， 而 由 于 角色 自 
角色 图 片 的 左上 角 开 始 计算 的 ， 所 以 为 了 将 
减 去 角色 本 身 宽度 的 一 半 ， 即 


CHARA_WIDTH / 2.0f。 最 终结 果 就 是 角色 在 画面 上 的 x 坐标 ， 即 上 面 程序 中 


的 等 式 。 


。 只 在 角色 靠近 画面 两 端 时 才 进 行 背景 卷 动 的 联动 


接 下 来 让 我 们 通过 与 角色 动作 


Scroll_2_1.cpp 中 ， 只 要 没有 超出 可 以 卷 动 的 边界 ， 角 色 就 始终 保持 在 画面 
中 央 ， 为 了 实现 这 种 效果 ， 我 们 移动 了 镜头 。 但 是 为 了 让 角色 你 持 在 画面 


的 联动 来 实现 一 个 更 通 真 的 眷 动 效 打 。 在 


中 央 ， 角 色 稍 微 癌 左右 移动 


六 ， 背 景 就 要 跟着 卷 动 ， 这 会 让 人 觉得 画面 


很 不 稳定 ， 看 起 来 会 有 点 难受 
央 附近 移动 时 背景 不 随 着 卷 动 
动 (参考 图 2-2-4) 。 


° 于 是 我 们 可 以 这 样 改进 : 让 角色 在 画面 中 
， 只 有 当 和 角色 靠近 画面 两 赣 时 背景 才 开 始 卷 


角色 在 画面 中 央 附近 时 背景 不 动 


用 色 靠 近 画面 边 缘 时 背 
景 开 始 卷 动 


图 2-2-4 角色 靠近 画面 两 端 时 背景 开始 卷 动 


示例 程序 Scroll_2_1a.cpp 实现 了 上 述 逻 辑 ， 其 中 重要 的 是 MoveChara 函数 
中 的 以 下 部 分 (代码 清单 2-2-2) 。 


代码 清单 2-2-2 只 有 满足 条 件 时 才 移 动 镜头 (Scroll_2_1a.cpp) 


050 | if ( fcamera x < fChara_sx - SCROLL_DIF ) { // 检查 镜头 是 否 靠近 
了 左 侧 

051 | fcamera x = fChara sx - SCROLL_DIF; 

052 | 

053 | if ( fCcamera_x > fchara_sx + SCROLL_DIF ) { // 检查 镜头 是 否 靠近 
了 石 侧 

054 | fcamera x = fChara sx + SCROLL_DIF; 

055 | } 


与 Scroll_ 2_1.cpp 不 同 的 是 ， 镜 头 不 再 每 次 都 被 强制 移动 了 。 按 照 代 码 清单 
2-2-2 的 程序 ， 只 有 当 满 足 条 件 时 镜头 才 会 移动 。 下 面 就 来 具体 分 析 一 个。 


最 开始 的 证 语句 中 有 以 下 内 容 : 


959 | if ( fCcamera_x < fchara_sx - SCROLL_DIF ) { // 检查 镜头 是 否 靠近 
了 左 侧 
051 | fcamera x = fCchara_ sx - SCROLL_DIF， 


| 


其 中 fCamera x 是 区 域 中 镜头 的 x 坐标 ，fChara_sx 是 区 域 中 角色 的 x 坐 
标 。 当 角色 到 画面 边缘 的 间距 变 小 时 ， 背 景 开 始 卷 动 ， 而 事实 上 角色 到 画 
面 边 缘 的 间距 变 小 ， 也 束 等 价 于 角色 到 画面 中 央 的 间距 变 大 (参考 图 2-2- 


5) 
(Bt 二 ) (ws 
! Ra 人 距 下 变 小 __/ 


图 2-2-5 当 角 色 到 画面 边缘 的 距离 变 小 时 ， 到 画面 中 央 的 距离 会 变 大 


而 画面 中 央 到 角色 的 间距 ， 是 由 区 域内 镜头 位 置 与 角色 位 置 的 差 决 定 的 。 
也 就 是 说 ， 当 镜头 位 置 与 角色 位 置 的 郑 为 零 时， 角色 就 正好 位 于 画面 中 
央 。 于 是 只 要 检查 镜头 相对 于 角色 是 否 靠近 左 侧 ， 当 靠近 时 就 强制 移动 镜 
头 即 可 。 此 时 运行 语句 


if ( fCamera_x < fchara_sx - SCROLL_DIF ) { // 检查 


检查 镜头 相对 角色 偏 左 的 距离 是 否 超 过 了 SCROLL_DIF 像素 。 如 果 镜 头 与 
角色 的 距离 没有 超过 常数 SCROLL_DIF， 镜 头 是 不 需要 移动 的 。 而 镜头 不 
移动 ， 就 意味 着 角色 在 画面 中 央 附 近 ， 此 时 背景 也 不 卷 动 。 


下 面 为 第 二 个 让 语句 。 


if ( fcamera x > fChara_sx + SCROLL_DIF ) { // 检查 镜头 是 否 靠近 


fcamera x = fChara_sx + SCROLL_DIF; 


同 理 ， 检 测 镜头 是 否 在 角色 右 侧 ， 当 偶 右 超过 一 定 值 时 开始 移动 镜头 。 其 
中 同样 通过 


if ( fcamera x > fChara_sx + SCROLL_DIF ) { // 检查 镜头 是 否 靠近 


检查 镜头 相对 角色 偏 右 的 距离 是 否 超过 了 SCROLL_DIF， 当 大 于 
SCROLL_DIF 时 ， 镜 头 就 会 移动 到 角色 偏 右 SCROLL_DIF 处 的 位 置 。 


在 上 面 的 两 个 证 语句 之 后 ，MoveChara 函数 内 还 有 防止 角 
可 移动 范围 的 处 理 ， 以 及 通过 镜头 位 置 计算 角色 与 背景 位 置 的 处 理 ， 

分 与 Scroll_2_1.cpp 是 一 致 的 ， 如 果 对 这 部 分 处 理 有 疑问 ， 可 以 参考 本 小 节 
开头 对 Scroll_2_1.cpp 的 讲解 。 


2.3 ” 卷 动 由 地 图 块 组 合 的 地 图 
ken Word 


和 


地 图 、 地 图 块 、 整 数 的 减法 、 移 位 运算 、 逻 辑 运算 


RANK/normal 


制作 大 尺寸 的 背景 不 单 耗 时 耗 力 ， 还 会 因为 文件 过 大 而 对 计算 机 造成 高 负荷 。 
本 小 节 就 让 我 们 来 一 起 学 习 通过 组 合 地 图 块 的 方式 来 实现 大 尺寸 的 背景 图 。 


下 面 我 们 就 来 看 看 如 何 通 过 组 合 地 图 块 来 显示 大 地 图 区域 或 背景)， 并 实现 
py 


图 2-3-1 地 图 块 组 合 的 地 图 卷 动 


游戏 中 经 常 需要 展示 一 张 尺寸 很 大 的 区 域 或 背景 ， a 

显然 是 不 现实 的 。 比 如 当 画 面 大 小 为 640x480 像素 时 ， 如 果 要 展示 一 张 该 画 
长 度 x10、 宽 度 x10 的 区 域 并 实现 卷 动 会 怎么 样 呢 ? 大 家 不 妨 来 计算 一 此 时 

的 地 图 为 6400x4800 像素 ， 用 真 色彩 显示 的 话 ，1 像素 就 需要 32bit (=4 字 

节 ) ，6400 x 4800 x 4 = 122880000 字 节 ， 也 就 是 说 ， 仅 背 景 图 片 就 会 消耗 

122MB 内 存 之 多 。 如 果 考 虑 到 2D 游戏 中 常用 的 多 重 卷 动 、 分 屏 画面 等 ， 还 会 

消耗 更 多 的 内 存 。 


虽然 目 Lio a es 志 载 了 122MB 以 上 的 内 存 ， 但 是 考虑 到 
更 高 的 分 辨 率 、 其 他 素材 的 容量 、 加 载 时 间 、 和 掌上 游戏 机 等 因素 ， 依 然 使 用 这 
个 级 别 的 数据 显 多 尖 是 不 现实 的 。 因 此 和 党 用 的 解决 方法 是 将 一 个 大 地 图 分 解 为 大 
于 个 小 的 “地 图 块 >，1 个 地 图 块 还 可 以 被 重复 使 用 ， 这 样 就 可 以 用 很 小 的 数据 容 
a 才 的 背景 。 接 下 来 我 们 就 来 讲解 如 何 将 大 地 图 用 高 效 并 快速 的 方 
IN 下 丰 


示例 程序 Scroll_3_1.cpp 实现 了 大 地 图 的 显示 。 这 个 程序 中 重要 的 部 分 是 
DrawMap 函数 中 的 以 下 内 容 (代码 清单 2-3-1) 。 


代码 清单 2-3-1 显示 地 图 的 主要 处 理 (Scroll 3_1.cpp 片段 ) 


加 上 


080 | fMap_x = VIEW WIDTH / 2.0f - fCcamera x; // 地 图 的 显示 坐标 
081 | fMap_y = VIEW_HEIGHT / 2.0f - fCamera _y; 

082 | nBaseChip_x = ( int ) - fMap x / CHIPSIZE; // 需要 绘制 的 第 一 个 地 
图 块 编号 

083 | nBaseChip_y = ( int ) - fMap_y /CHIPSIZE， 

084 | fBasePos_x = fMap_x + nBasechip_x * CHIPSIZE; // 需要 绘制 的 第 一 个 地 
图 块 坐标 

085 | fBasePos_y = fMap_y + nBaseChip_y * CHIPSIZE; 

086 | nChipNum_ x = VIEW WIDTH / CHIPSIZE + 1 + 1; // 需要 绘制 的 横向 地 图 
块 数量 

087 | nChipNum_y = VIEW_HEIGHT / CHIPSIZE + 1 + 1;  // 需要 绘制 的 纵向 地 图 
块 数量 

088 fchipPos_y = fBasePos_y; 

089 for ( i= 0; i < nCchipNum y; i++ ) { 

090 fchipPos_x = fBasePos_x; 


| 
| 
091 | for (j= 0; j < nCchipNum x; j++ ) { 
| DrawMapChip( fCchipPos_x, fChipPos_y, 
| 


093 nMapData[nBaseCchip_y + il][nBasechip x + j] 
); 

094 | fchipPos_x += CHIPSIZE; 

095 | } 

096 | fchipPos_y += CHIPSIZE; 

097 | } 


本 次 引用 的 代码 段 有 点 长 ， 下 面 将 依次 说 明 。 EE 区 本 fMap_x 与 _y 和 是 


假设 地 图 为 一 张大 图 片 时 地 图 左上 角 的 坐标 。 虽 然 最 


国 面 上 会 绘制 很 多 个 地 


图 块 ， 但 这 些 都 是 以 地 图 左上 角 的 坐标 为 基准 的 。 这 个 程序 中 使 用 的 地 图 块 在 
水 平方 向 有 MAPSIZE X 个 (实际 是 21 个 ) ， 在 垂直 方向 有 MAPSIZE Y 个 

(实际 是 12 个 ) 。 简 单 地 说 就 是 ， 以 fMap_x 与 fMap_y 所 示 的 左上 角 坐 标 为 起 
点 ， 在 垂直 方向 循环 MAPSIZE_Y 次 ， 水 平方 向 循环 MAPSIZE_X 次 ， 共 绘制 
出 (MAPSIZE_Y x MAPSIZE_X) 个 地 图 块 就 可 以 了 (参考 图 2-3-2) 。 


显示 范围 MAPSIZE Xx 个 


本 | 


MAPSIZE_Y 个 


图 2-3-2 ”从 左上 角 坐 标 开始 循环 配置 地 图 块 


事实 上 ， 虽 然 通 过 这 种 方式 将 地 图 块 依次 填充 可 以 绘 出 一 整 张 正 确 的 地 图 ， 但 
是 在 正式 的 游戏 中 却 很 少 这 样 做 。 因 为 在 大 部 分 游戏 中 ， 地 图 都 是 非常 大 的 ， 

画面 所 能 显示 的 只 是 地 图 中 很 小 的 一 部 分 ， 如 果 用 地 图 块 提前 将 整 张 地 图 都 绘 
制 出 来 ， 大 部 分 地 图 都 没有 在 画面 上 显示 出 来 ， 也 就 失去 了 意义 (参考 图 2-3- 
2) 。 可 能 有 人 会 想 ， 反 正 述 早 都 要 将 地 图 绘制 出 来 ， 提 前 绘制 好 有 什么 问题 

呢 ? 这 是 由 于 无 论 是 2D 还 是 3D 的 绘图 系统 ， 大 量 无 用 的 绘图 命令 都 会 浪费 绘 
图 系统 的 资源 ， 这 里 所 说 的 资源 是 指 CPU 的 处 理 时 间 、 内 存 容量 等 。 在 绘图 系 
统 中 ， 只 要 发 出 一 条 绘图 指令 ， 即 便 实 际 上 什么 都 没有 绘制 ， 也 十 相当 花费 时 
间 的 。 男 外 ， 由 于 大 多 数 绘图 系统 中 都 会 使 用 显示 列表 或 顶点 缓冲 的 形式 将 需 
要 显示 的 信息 暂 存 起 来 ， 如 果 其 中 存储 了 太 多 实际 用 不 到 的 图 形 ， 就 会 严重 当 
， 。 因此 在 实际 绘制 地 图 时 ， 应 该 遵循 一 条 原则 ， 即 只 绘制 需要 显示 的 地 


在 示例 程序 Scroll_3_1.cpp 中 ， 将 需要 绘制 的 地 图 块 编号 保存 在 了 变量 
nBaseChip_x 与 nBaseChip_y 中 。 具 体 来 说 ，nBaseChip_x 中 保存 的 是 从 地 图 左 
端 起 第 一 个 需要 绘制 的 地 图 块 编 号 ，nBaseChip_y 中 保存 的 是 从 地 图 上 端 起 第 一 
个 需要 绘制 的 地 图 块 编号 (参考 图 2-3-3) 。 


nBaseChip x nBaseChip y 


0/0 | 1m 6/0 | 7/0 
0/1 1/1 6/1 7/1 
0/2 1/2 2/: My 4/: 5/: 6/2 7/2 Se 
/i / / / / 显示 范围 
0/3 1/3 2/3 /3 4 /3 5/3 6/3 7/3 7 
- X 


图 2-3-3 将 显示 范围 中 左上 角 的 地 图 块 编号 存 入 变量 
在 程序 中 ，nBaseChip_x 与 nBaseChip_y 实际 上 是 通过 以 下 方式 计算 得 到 的 。 


nBaseChip x = ( int ) - fMap_x / CHIPSIZE; // 需要 绘制 的 第 一 个 地 


nBaseChip_y ( int ) - fMap_y / CHIPSIZE; 


百 先 将 地 图 左上 和 角 的 仅 标 取 人 负 和 号 再 取 整 ， 然 后 除 以 地 图 块 的 大 小 (实际 为 


64) 。 通 过 对 地 图 左上 角 坐 标 取 负 号 ， 避 以 得 到 以 地 图 并 上 角 坐标 为 原点 中 
(0,0) 时 显示 画面 的 左上 角 坐 标 。 而 对 其 取 整 ， 是 由 于 表示 地 图 块 大 小 的 
CHIPSIZE 是 在 程序 最 上 方 定义 的 整数 型 常数 。 而 由 于 是 在 整数 间 进 行 除法 运 
算 ， 因 此 计算 结果 的 小 数 点 之 后 的 部 分 都 会 被 丢弃 ， 其 结果 正好 可 以 用 来 表示 
地 图 的 总 宽度 除 以 地 图 块 尺寸 CHIPSIZE 后 ， 显 示 画 面 中 左上 和 角 显 示 的 是 第 几 
个 地 图 块 。 由 此 我 们 就 得 到 了 需要 绘制 的 地 图 块 编号 (参考 图 2-3-3) 。 


顺便 一 提 ， 计 算 nBaseChip_x 与 nBaseChip_y 的 语句 


nBaseChip_x ( int ) - fMap_x / CHIPSIZE; 
nBaseChip_y ( int ) - fMap_y / CHIPSIZE; 


中 ， 如 果 CHIPSIZE 固定 为 64， 那 么 可 以 使 用 


nBaseChip x = ( int ) - fMap_x >> 6; 
nBaseChip_y = ( int ) - fMap_y >> 6; 


获得 同样 的 结果 。 这 是 一 种 可 以 替代 除法 运算 的 方法 ， 称 为 “ 移 位 ”。 在 以 前 
CPU 指令 中 还 没有 除法 运算 ， ee 
但 站 现在 除法 运算 指令 已 经 非常 而 且 在 上 式 中 除法 运算 也 没有 被 藤 套 在 
大 量 循环 中 ， 所 以 即便 守 换 沪 箭 位 也 没有 大意 六。 现代 的 CPU 中 大 都 内 置 了 
名 为 “ 桶 形 移 位 器 * 的 逻辑 电路 ， 可 以 在 一 个 时 钟 周期 内 进行 任意 长 度 的 移 位 ， 
因此 如 果 是 在 数量 非常 巨大 的 循环 中 ， 将 除法 运算 奉 换 为 移 位 运算 会 获得 更 快 


的 速度 。 
。 计 算 地 图 块 的 绘制 位 置 


- 面 已 经 计算 出 了 需要 绘制 的 最 左上 角 的 地 图 块 编号 ， 接 下 来 就 来 计算 
下 夯 面 上 绘制 该 地 图 块 的 实际 坐标 。 


fBasePos_x = fMap_x + nBaseCchip_x * CHIPSIZE; // 需要 绘制 的 第 
内 坐 标 


fBasePos_y = fMap_y + nBaseChip_y * CHIPSIZE 


这 里 仍然 以 大 地 图 的 左上 角 坐 标 为 基准 。 由 于 目前 画面 所 要 显示 的 地 图 
块 ， 是 地 图 中 目 上 数 第 nBaseChip_y 块 ， 自 左 数 第 nBaseChip x 块 ， 因 此 将 
其 分 别 乘 以 每 个 地 图 块 的 尺寸 ， 再 加 上 大 地 图 的 左上 和 角 坐 标 (fMap_x, 
fMap_y) ， 就 可 以 得 到 实际 需要 绘制 的 地 图 块 的 坐标 (参考 图 2-3-4) 。 


nBaseChip y x CHIPSIZE 


(f{Map x, {Map y) 一 


显示 汇 围 


py 


nBaseChip x x CHIPSIZE 
图 2-3-4 ”以 大 地 图 的 左上 角 坐 标 为 基准 计算 显示 坐标 
0 一 个 小 容 门 ， 如 果 CHIPSIZE 为 64， 那 么 坐标 计算 就 可 以 写 


fBasePos x = -( ( int )-fMap_x & Ox3f); // 需要 绘制 的 第 一 个 


4 
图 块 坐标 


fBasePoSy= -( ( int )-fMap_y & Ox3f); 


即 通过 远 辑 运算 (这 里 使 用 了 AND 运算 符 ) 替代 乘法 运算 来 计算 坐标 位 
置 。 由 于 现在 的 CPU 中 乘法 运算 的 速度 与 逻辑 运算 的 速度 的 差别 比 起 以 前 
来 已 经 非常 小 了 ， 因 此 使 用 逻辑 运算 的 必要 性 也 变 小 了 。 不 过 即便 乘法 运 
算 能 在 CPU 的 一 个 时 钟 周期 内 完成 ， 但 乘法 运算 和 逻辑 运算 分 别 在 CPU 
的 不 同 单元 中 处 理 时 ， 由 于 按 顺 序 执行 的 乘法 运算 和 逻辑 运算 可 以 并 行 处 
理 ， 因 此 还 不 能 说 逻辑 运算 已 经 完全 可 以 被 蔡 代 。 


POINT ”绘制 地 图 使 用 的 乘法 、 除 法 运算 可 以 被 车 换 为 更 快 的 逻辑 运 
算 ， 不 过 平时 使 用 乘法 和 除法 就 足够 了 。 


下 面 让 我 们 回 到 程序 的 处 理 中 ， 来 计算 一 下 画面 上 知 要 绘制 的 地 图 块 数 
里 O 


086 | nChipNum_x = VIEW_WIDTH / CHIPSIZE + 1 + 1; // 需要 绘制 的 横向 
地 图 块 数量 
087 | nChipNum_y = VIEW_HEIGHT / CHIPSIZE + 1 + 1; // 需要 绘制 的 纵向 


地 图 块 数量 


一 般 情 况 下 ， 在 水 平方 向 用 画面 宽度 除 以 地 图 块 尺寸 ， 在 垂直 方向 用 画面 
高 度 除 以 地 图 块 尺寸， 应 该 就 能 得 到 要 绘制 的 地 图 块 数量 。 但 是 实际 上 这 
还 不 够 ， 上 面 的 程序 中 就 将 所 得 数值 +1+1， 即 额外 多 绘制 了 2 个 


第 一 个 +1， 是 为 了 应 对 画面 大 小 无 法 整除 地 图 块 的 情况 。 如 果 画 面 大 小 不 
是 地 图 块 尺寸 的 整数 倍 ， 画 面 上 就 会 有 一 部 分 淤 出 ， 即 存在 一 些 地 图 块 只 
需要 绘制 一 部 分 (参考 图 2-3-5) 。 为 了 应 对 这 些 只 显示 一 半 的 地 图 块 ， 必 
须 对 绘制 数 +1。 


有 显示 范围 


Na 有 淤 出 


图 2-3-5 ”如 果 不 绘制 溢出 部 分 的 地 图 块 ， 画 面 显示 就 会 有 问题 


实际 上 在 示例 程序 Scroll_3_1.cpp 中 ， 地 图 块 的 大 小 CHIPSIZE 为 64， 画 面 
的 宽度 VIEW_WIDTH 为 640， 正 好 可 以 整除 CHIPSIZE， 而 画面 的 高 480 
则 无 法 整除 CHIPSIZE。 因 此 在 水 平方 向 上 ， 


nChipNum_x = VIEW_WIDTH / CHIPSIZE + 1 + 1; // 需要 绘制 的 横向 地 


就 可 以 省 略 一 个 +1， 改 为 


nChipNum_x = VIEW_WIDTH / CHIPSIZE + 1; // 需要 绘制 的 横向 地 图 块 


从 显示 结果 来 看 是 没有 什么 区 别 的 。 而 在 垂直 方 同上 ， 


绘制 的 纵向 


Nn 
的 


087 | nChipNum_y = VIEW_HEIGHT / CHIPSIZE + 1; // 需要 绘制 的 横向 地 图 


就 会 因 绘 制 数量 不 足 而 导致 显示 出 现 问 题 。 


代码 中 的 第 二 个 +1， 古 为 了 保证 地 图 在 卷 动 过 程 中 也 能 够 绘制 出 足够 的 地 

图 块 。 当 需要 绘制 的 地 图 块 的 左上 角 坐 标 与 画面 左上 角 重 合 时 ， 这 个 +1 是 

不 需要 的 。 而 当 需 要 绘制 的 地 图 块 的 左上 角 坐 标 与 画面 左 端 不 一 致 时 ， 画 

此 时 地 图 块 绘制 数 束 必须 再 +1 了 
参 2-3-6 


图 2-3-6 卷 动 时 会 出 现 不 完整 的 地 图 块 


在 垂直 方向 上 也 出 于 同样 的 原因 做 了 相同 的 处 理 ， 只 不 过 由 于 地 图 块 一 开 
始 就 无 法 被 画面 高 度 整 除 ， 所 以 相 比 水 平方 向 理解 起 来 可 能 有 点 难 。 如 果 
觉得 在 头脑 中 难以 想象 ， 可 以 在 示例 程序 Scroll_3_1.cpp 中 删除 一 个 +1， 
然后 观察 程序 实际 的 运行 结果 。 


仔细 观察 一 下 下 面 两 行 计算 绘制 数量 的 部 分 ， 


086 | nChipNum_x = VIEW_WIDTH / CHIPSIZE + 1 + 1; // 需要 绘制 的 横向 
地 图 块 数量 
087 | nChipNum_y = VIEW_HEIGHT / CHIPSIZE + 1 + 1; // 需要 绘制 的 纵向 
地 图 块 数量 


| 


就 会 发 现 算式 中 包含 的 全 部 是 类 似 VIEW_WIDTH、VIEW_HEIGHT、 
CHIPSIZE 这 样 的 常量 ， 一 个 变量 都 没有 。 在 这 样 的 情况 下 ， 一 般 可 以 将 整 
个 语句 使 用 define 进行 定义 ， 而 不 必 每 次 都 重新 计算 ， 这 样 可 以 让 程序 更 
简短 易 懂 。 比 如 上 面 的 语句 可 以 写成 


#define CHIPNUM Xx ( VIEW WIDTH / CHIPSIZE + 
#define CHIPNUM_Y ( VIEW HEIGHT / CHIPSIZE + 


使 用 CHIPNUM_X 与 CHIPNUM_Y 来 营 代 nChipNum x nChipNum y。 


至 于 在 实际 项 目 中 是 否 将 这 样 的 语句 转换 为 常量 ， 则 需要 在 综合 考虑 程序 
的 易 读 性 和 工作 量 等 的 基础 上 进行 判断 。 


在 示例 程序 Scroll_3_1.cpp 接 下 来 的 部 分 中 ， 会 使 用 目前 为 止 得 到 的 一 些 党 
量 ， 通 过 一 个 2 层 循环 将 地 图 块 实际 绘制 出 来 。 而 在 这 个 过 程 中 ， 当 计算 
每 个 地 图 块 的 绘制 坐标 时 ， 应 该 注意 避免 无 用 的 乘法 运算 等 尽 可 能 地 优 
化 代码 效率 。 这 些 程序 层面 的 技巧 ， 可 以 在 很 多 不 同 的 情况 下 通用 ， 具体 
实例 请 参考 示例 程序 。 


2.4 波纹 式 的 播 搜 卷 动 
K 人 Word 


波纹 扭曲 、 正 弦 波 、 波 长 、 振 幅 、 周 期 


RANK/normal 


- 二 - i 
WW- 


卷 动 不 光 可 以 应 用 在 背景 的 移动 中 ， 还 可 以 用 来 实现 一 些 动 画 效果 。 在 本 小 
节 ， 我 们 就 来 一 起 学 习 卷 动 的 应 用 。 


前 面 已 经 学 习 了 如 何 让 整 张 图 片 沿 同一 方向 卷 动 ， 本 小 节 将 讲解 如 何 让 一 张 图 
片 的 各 部 分 通过 卷 动 变形 ， 并 呈现 波纹 式 的 摇摆 。 


图 2-4-1 让 图 片 呈 45 度 扭 曲 倾斜 的 程序 


首先 看 示例 程序 Scroll_ 4_1.cpp， 程 序 对 一 张 图 片 进 行 了 扭曲 倾斜 处 理 。 程 序 中 
一 个 重要 的 部 分 ， 是 在 全 局 变量 中 定义 的 下 面 这 行 (代码 清单 2-4-1) 。 


代码 清单 2-4-1 图片 扭 曲 倾斜 程序 的 全 局 变量 定义 (Scroll_4_1 片段 ) 


019 | DRAWPOINT v2Points[VIEW_HEIGHT]; 旭 形 线 的 位 置 


在 之 后 的 程序 中 ， 会 在 DirectX 演 染 的 部 分 读 取 这 个 变量 ， 然 后 将 图 片 沿 垂直 方 


向 分 割 为 1 像素 的 细 长 线 (这 里 称 为 图 形 线 ) ， 并 设置 每 一 行 图 形 线 的 绘制 位 
置 。 即 v2Points[0].x = 0.0f、v2Points[0].y = 0.0f，v2Points[1].x = 0.0f、 
v2Points[1].y = 1.0f, v2Points[2].x = 0.0f、v2Points[2].y = 2.0f...... 当 其 中 的 x 从 
标 都 为 0 时 ， 图 片 正常 显示 ; 而 如 果 x 坐标 有 值 ， 图 片 就 会 根据 坐标 的 不 同 产 
生 扭 曲 〈 参 考 图 2-4-2) 。 
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二 一 oo 窜改 cr 广 一 


图 2-4-2 ”根据 图 形 线 绘制 坐标 的 不 同 使 图 片 产生 扭曲 

像 这 样 根据 每 行 图 形 线 (也 可 以 称 作 光栅 ) 位 置 的 不 同 进行 卷 动 的 方法 ， 称 为 
光 李 扫描 法 (其 实 只 有 在 硬件 层面 上 操作 光栅 才能 称 为 真正 的 光栅 扫描 ， 本 书 
中 只 是 借用 了 这 个 概念 ) 。 


程序 中 另 一 个 重要 的 部 分 ， 是 MoveBack 函数 中 决定 每 行 图 形 线 坐标 的 代码 ， 
如 下 所 未 * 


代码 清单 2-4-2 ”决定 图 形 线 坐 标的 部 分 (Scroll_4_1.cpp 片段 ) 


十 


033 | for (i= 0; i < VIEW HEIGHT; i++ ) { 

034 | v2Points[il].y = ( float )i; // 图 形 线 的 x 坐标 
035 | v2Points[i].x = ( float )i; // 图 形 线 的 y 和 坐标 
036 | } 


在 上 面 的 代码 中 ， 通 过 for 语句 执行 VIEW_HEIGHT 次 ( 即 图 片 的 高 度 ) 循 
环 ， 从 而 决定 图 片 中 每 行 图 形 线 的 位 置 。 其 中 将 第 i 像素 的 图 形 线 绘制 在 从 上 开 
始 第 i 行 的 代码 是 


034 | v2Points[il].y = ( float )i; // 图 形 线 的 x 坐标 


无 论 图 片 是 否 变 形 ， 这 行 代码 都 不 需要 更 改 ， 因 为 所 有 的 图 片 都 需要 通过 这 样 
的 处 理 绘制 出 来 。 


而 程序 中 使 图 片 变形 的 关键 代码 为 


v2Points[i].x = ( float )i; 于 形 线 的 y 坐 标 


即将 第 i 行 图 形 线 的 x 坐标 设置 为 1， 开始 绘 制图 片 时 ， 图 形 线 越 洁 下 则 x 坐标 
越 靠 右 ， 最 终 就 绘制 出 了 一 张 向 斜 45 度 方向 扭曲 的 图 片 (参考 图 2-4-2) 。 如 
果 对 此 理解 有 困难 的 话 ， 可 以 将 


034 | v2Points[il].y = ( float )i; // 图 形 线 的 x 坐标 
035 | v2Points[i].x = ( float )i; // 图 形 线 的 y 坐 标 
这 部 分 更 改 为 


v2Points[il].y 
V2Points[i].x 


( float )i; 妈 形 线 的 x 坐标 
90.0f; 妈 形 线 的 y 坐 标 


这 样 图 片 束 不 会 有 任何 变形 了 。 而 如 果 将 代码 更 改 为 


034 | v2Points[il.y = ( float )i; // 图 形 线 的 x 坐标 
035 | v2Points[i].x = (float )i * 0.5f; // 图 形 线 的 y 坐 标 


也 可 以 观 守 图片 实 际会 如 何 变形 。 建议 大 家 实际 验证 一 下 ， 应 该 会 更 加 容易 和 
坚 。 


。 使 用 正弦 函数 绘制 正弦 波 


三 es 让 我 们 首先 来 实现 让 一 张 图 片 呈 静 态 的 波 
纹 式 扭曲 


评 


“7 


RN 
图 2-4-3 ”将 图 片 扭曲 为 波纹 形状 的 程序 


示例 程序 Scroll_4_1a.cpp 实现 了 将 图 片 扭曲 为 波纹 形状 的 效果 。 这 个 程序 
中 的 重点 是 MoveBack 函数 中 的 以 下 部 分 。 


代码 清单 2-4-3 ”将 图 片 扭 曲 为 波纹 形状 的 部 分 (Scroll_4_1a.cpp 片段 ) 


034 | v2Points[il].y = ( float )i; 
035 | v2Points[i].x = 30.0f * sinf( 2.0f * PI * v2Points[i].y 
/ 200.0f ) 


与 之 前 将 图 片 呈 45 度 扭曲 倾斜 的 程序 相 比 ， 这 里 绘制 各 图 形 线 的 y 坐标 部 
分 没有 改变 ， 即 在 绘制 图 形 线 的 y 坐标 时 还 是 按照 正常 位 置 绘制 。 而 针对 
图 形 线 的 x 坐标 ， 则 使 用 J 了 正六 羡 数 (sin 函数 ) 来 决定 其 位 置 。 如 图 2-4-4 
0 图 形 是 平滑 的 波浪 ， 所 以 可 以 实现 类 似 波纹 的 
用 曲 效果 。 


图 2-4-4 ”正弦 画 数 所 绘制 的 图 形 


像 这 样 使 用 正弦 画 数 生成 的 波形 称 为 正弦 波 。 简 单 的 正弦 波 可 以 用 下 面 的 
公式 表示 。 


4 .si 2 区 
二 A* SnI 一 一 了 上 
2 (xz) 


可 以 看 到 公式 中 的 正弦 波 包含 振幅 A 与 波长 A 两 个 特征 。 振 幅 A 表示 波 振 
动 的 幅度 大 小 ， 振 幅 越 大 说 明 波 振动 的 幅度 越 大 。 具 体 来 说 ， 正 弦 函 数 的 
取 值 范围 是 [-1, 1]， 将 其 乘 以 常数 A 吏 可 以 得 到 振幅 为 A 的 波 ， 所 以 振幅 
的 取 值 范围 是 [-A, A] (参考 图 2-4-5) 。 


图 2-4-5 ”正弦 波 的 振幅 A 与 波长 和 


和 表示 波 在 1 个 周期 内 波动 的 距离 ， 其 值 越 大 波形 越 宽 (参考 图 2-4- 
6 o 


A 


图 2-4-6 波 在 1 个 周期 内 的 速度 随 着 波长 4 的 大 小 而 发 生变 化 


如 果 x 增 加 A， 正弦 玉 数 就 要 增加 2x ， 而 如 果 将 角 以 弧度 表示 的 话 ，27 正 
0 


035 | v2Points[i].x = 30.0f * sinf( 2.0f * PI * V2Points[I].y 
/ 200.0f ); 


将 其 与 正弦 波 的 公式 
y = A- sin( Tz) 


类 比 一 下 ， 可 以 得 到 


A=30 
A 人 = 200 


即 这 个 程序 中 使 用 了 一 个 振幅 为 30 像素 、 波 长 为 200 像素 的 正弦 波 来 绘制 
图 形 线 的 x 坐标 ， 从 而 得 到 了 波纹 状 的 扭曲 效 采 。 


正弦 波 是 游戏 开发 中 经 常用 到 的 非常 重要 的 一 点 ， 最 好 牢记 其 使 用 方法 。 
随时 间 动 态 播 摆 
接 下 来 ， 让 我 们 尝试 使 图 片 随时 间 像 波浪 那样 摇 授 。 


示例 程序 Scroll_4_1b.cpp 实现 了 使 图 片 像 波浪 那样 摇摆 的 效果 。 程 序 中 的 
重点 是 MoveBack 函数 中 的 以 下 部 分 。 


代码 清单 2-4-4 证 图 片 像 波 浪 那样 播 摆 的 代码 (Scroll_4_1b.cpp 片段 ) 


v2Points[il]l.y = ( float )i; 
v2Points[i].x = 30.0f * sinf( 2.0f * PI * ( fTime / 
- V2Points[i].y / 200.0f ) ); 


对 图 形 线 的 y 坐标 的 处 理 仍然 不 变 ， 而 决定 图 形 线 的 x 坐标 的 正弦 函数 中 


则 被 加 入 了 表示 所 经 过 的 时 间 的 fTime 变量 。 据 此 正弦 函数 就 可 以 随时 间 
人 图 片 就 会 随时 间 进 行 播 摆 。 加 入 了 时 间 要 素 的 正 张波 公式 如 下 
R O 


FP t TI 
,anf 


量 t 表 示 经 过 的 时 间 。 在 这 个 正弦 波 公式 中 ， 除 了 之 前 出 现 过 的 振幅 A 
还 出 现 了 周期 了 这 一 特征 。 所 谓 周期 T， 正 如 其 字面 意思 
样 ， 表 示 多 长 时 间 是 一 个 周期 ， 其 值 越 大 ， 一 次 波动 所 经 过 的 时 间 越 长 。 


上 式 中 时 间 每 推进 了 ， 正 艾 函 数 中 束 增 加 2x。 让 我 们 再 重新 看 一 下 
Scroll_4_1b.cpp 中 绘制 图 形 线 的 x 坐标 的 部 分 。 


036 | v2Points[i].x = 30.0f * sinf( 2.0f * PI * ( fTime / 
60.0f - v2Points[i].y / 200.0f f ) 3 


与 包含 时 间 的 正弦 波 公 式 


-amfz(- 引 } 
对 比 来 看 ， 可 以 得 到 


A=30 
T=60 
A= 200 


程序 中 fTime 的 时 间 单 位 为 帧 ， 因 此 图 形 线 的 x 坐标 将 以 振幅 为 30 像素 、 
周期 为 60 帧 《=1 秒 ) 、 波 长 为 200 像素 的 正弦 波 的 形式 摇摆 。 


目 然 界 中 存在 很 多 种 波 ， 与 正弦 波 相似 的 波 也 有 不 少 ， 因 此 通过 正弦 波 就 
能 大 致 表现 出 很 多 真实 世界 中 的 波 (但 是 像 水 面 那 样 的 波状 格 来 说 并 不 是 
正 物流 ) 。 如 果 读 者 对 振幅 A、 波 长 4、 周 期 这 些 常 数 的 意义 不 太 理 
解 ， 建 议 尝试 着 修改 一 下 程序 中 的 这 些 常 数 ， 来 实际 观察 波形 的 变化 ， 从 
而 更 好 地 掌握 。 


2.5 ”制作 有 纵深 感 的 卷 动 


ken Wo rd 、 RANK/hard 
透视 、 比 例 计 算 、 梯 形 = 


会 二 
ee 


通过 将 已 经 学 习 过 的 光栅 扫描 与 多 重 卷 动 相 结 合 ， 即 便 在 2D 绘图 系统 中 ， 也 可 
以 做 出 有 纵深 感 的 画面 效果 。 本 小 节 就 让 我 们 一 起 来 学 习 这 些 能 提升 虚拟 世界 
的 舞台 效果 的 方法 吧 。 


本 小 节 中 将 不 再 使 用 3D 多 边 形 ， 而 仅 在 2D 绘图 系统 的 范围 内 ， 制 作出 有 纵深 
感 (透视 ) 的 卷 动 效 果 。 这 种 技术 经 常 被 用 于 展现 格斗 游戏 的 地 面 等 。 


图 2-5-1 用 2D 绘图 表现 带 有 纵深 感 的 卷 动 程序 


我 们 已 经 学 习 过 多 重 卷 动 的 实现 ， 而 为 了 制作 出 带 有 纵深 感 的 卷 动 效 果 ， 就 需 
要 让 近 处 地 面 的 移动 变 快 ， 远 处 地 面 的 移动 变 慢 。 在 使 用 前 文 介绍 的 图 形 线 的 
方式 来 制作 卷 动 效果 的 情况 下 ， 比 如 在 表现 地 面 时 ， 可 以 使 用 一 张 梯形 的 背 
景 ， 让 下 面 的 图 形 线 快速 移动 ， 上 面 的 图 形 线 慢 速 移 动 ， 这 样 就 可 以 做 出 有 纵 
深 感 的 地 面 了 。 示 例 程序 Scroll_5_1.cpp 就 使 用 梯形 背景 实现 了 有 纵深 感 的 卷 
动 。 程 序 中 的 重点 是 MoveBack 函数 中 的 以 下 部 分 。 


A 2-5-1 ”实现 有 纵深 感 的 卷 动 的 程序 的 主要 部 分 (Scroll_ 5_1.cpp 片 


060 | fLinewidth = PIC_WIDTH_UP， 

061 | fLineBase = ( PIC WIDTH_DOWN - PIC WIDTH_UP ) / 2.0f,; 

062 | for (i= 0; i < VIEW HEIGHT; I++ ) { 

063 | v2Points[il].y = ( float )i; 

064 | V2Points[i].x = fBack x * ( fLinewidth - VIEW WIDTH ) / ( 
PIC_WIDTH_DOWN - VIEW WIDTH ) - fLineBase,; 

065 | fLinewidth += ( float )( PIC WIDTH_DOWN - PIC WIDTH_UP ) / 
VIEW_HEIGHT,; 

066 | fLineBase -= ( float )( PIC WIDTH_DOWN - PIC WIDTH_UP ) / 


VIEW_HEIGHT / 2.0f; 
067 | . 


| 


其 中 变量 fBack_x 是 卷 动 的 基准 位 置 ， 即 图 形 最 下 端的 图 形 线 ， 也 是 卷 动 速度 
最 快 部 分 的 卷 动 位 置 。 其 他 图 形 线 的 x 坐标 ， 都 是 以 fBack_x 为 基准 位 置 ， 通 过 
一 定 的 比例 关系 计算 得 到 的 。 具 体 执行 计算 的 是 代码 清单 2-5-1 中 的 


064 | v2Points[i].x = fBack x * ( fLinewidth - VIEW WIDTH ) / (人 
PIC_WIDTH_DOWN - VIEW WIDTH ) - fLineBase,; 


这 一 行 。 而 具体 是 怎样 计算 的 呢 ? 让 我 们 来 分 析 一 下 。 
为 了 让 等 式 更 容易 理解 ， 我 们 首先 做 以 下 假设 (参考 图 2-5-2) 。 
。 表 示 基 准 卷 动 位 置 的 变量 fBack_x 为 xp 


正在 处 理 的 图 形 线 中 ， 表 示 有 效 图 形 (有 效 指 梯形 图 片 中 需要 被 绘制 
的 部 分 ) 开始 的 x 坐标 的 变量 人 LineBase 为 xj 


正在 处 理 的 图 形 线 中 ， 有 效 图 形 的 宽度 fLineWidth 为 wr 


画面 的 宽度 VIEW_WIDTH 为 wy 


图 形 下 端的 宽度 PIC_WIDTH_DOWN 为 wp 


图 形 上 端的 宽度 PIC_WIDTH_UP 为 wy 


wp 


图 2-5-2 等 式 各 要 素 与 图 形 的 对 应 关系 
因此 上 面 的 程序 语句 就 可 以 对 应 等 式 


IF 一 Wy 
T 一 一 5 一 ZL 
wD 一 Wy 


来 分 析 一 下 这 个 等 
目 先 考虑 xs = 0 即 卷 动 的 镜头 在 最 左边 时 的 情况 ， 此 时 上 面 的 等 式 为 


X=- Xr 


也 就 是 说 ， 当 前 图 形 线 中 有 效 图 形 的 起 始 位 置 正 好 与 画面 左 端 一 致 ， 所 有 的 图 
形 线 都 会 被 绘制 (参考 图 2-5-3) 。 


显示 范围 


六 


图 2-5-3 有 效 图 形 与 画面 左 端 一 致 


以 这 种 情况 为 基准 时 ， 我 们 接 下 来 要 关注 的 束 古 ， 每 一 行 图 形 线 的 最 大 卷 动 范 
围 是 多 少 。 由 于 背景 图 是 梯形 ， 所 以 每 行 图 形 线 可 卷 动 的 幅度 都 不 同 。 于 是 就 
要 使 卷 动 幅度 大 的 图 形 线 快速 卷 动 ， 幅 度 小 的 慢 速 卷 动 ， 从 而 形成 最 终 的 卷 动 
效果 。 这 与 2.1 节 介 绍 的 多 重 卷 动 中 ， 宽 度 大 的 图 形 速 度 快 ， 宽 度 小 的 图 形 速 度 
慢 的 原理 古 一 样 的 。 将 上 述 处 理 转 换 为 公式 ， 令 图 形 的 宽度 为 w ， 画面 的 宽度 
为 wy， 那么 可 以 卷 动 的 最 大 幅度 就 为 


WwW- wy 


而 由 于 当前 图 形 线 中 有 效 图 形 的 宽度 为 wr ， 所 以 当前 图 形 线 可 以 卷 动 的 最 大 幅 
度 为 


WL- Wy 


同 理 ， 在 作为 卷 动 基准 的 图 形 下 端 ， 因 为 有 效 图 形 的 宽度 为 wp ， 所 以 图 形 下 端 
可 以 卷 动 的 最 大 幅度 为 


Wp- Wy 


与 多 重 卷 动 的 原理 相同 ， 当 前 图 形 线 与 作为 基准 的 下 端 图 形 线 的 卷 动 速度 比 为 


OF 一 Wy 


wD 一 Wy 


因此 ， 假 设 绘制 当前 图 形 线 所 需要 的 x 坐标 为 x ， 作 为 卷 动 基准 的 画面 下 端的 
图 形 线 的 x 坐标 为 xe ， 则 有 


WwL 一 Wy 二 
IT 一 一 IT8B 十 ( 
wD 一 Wwy 


中 C 为 第 数 ， 等 于 作为 基准 的 xp 为 零 时 x 的 值 。 


别 才 已 经 得 出 一 个 结论 ， 即 xp =0 时 镜头 从 最 左边 开始 卷 动 ， 此 时 x =-xr 。 所 以 
常数 C =-x: 。 结 果 就 得 到 了 


y 


Ne 


即 程序 中 所 书写 的 等 式 。 


这 样 我 们 就 得 到 了 一 行 图 形 线 的 位 置 ， 因 为 最 终 需 要 绘制 出 整个 梯形 图 形 ， 所 
以 需要 根据 每 行 图 形 线 更 改 其 宽度 fineWidth (w; ) 以 及 当前 图 形 线 中 有 效 图 
形 起 始 位 置 的 x 坐标 全 ineBase (x; ) 。fLineWidth 的 计算 方法 是 


065 fLinewidth += ( float )( PIC WIDTH_DOWN - PIC WIDTH UP ) / 
VIEW_HEIGHT; 


即 每 行 图 形 线 都 由 上 一 行 递增 得 到 ， 递 增 的 值 是 梯形 的 下 底 
(PIC_WIDTH_DOWN) 减 去 上 底 (PIC_WIDTH_UP) 后 ， 再 除 以 梯形 中 图 形 线 

的 行 数 (VIEW_HEIGHT) 而 得 到 的 结果 。 图 形 线 从 最 开始 的 PIC_WIDTH_UP 

开始 循环 递增 ， 经 过 VIEW_HEIGHT 次 循环 后 增加 至 PIC_WIDTH_DOWN 。 


fLineBase 的 计算 方法 为 


966 | fLineBase -= ( float )( PIC_WIDTH_DOWN - PIC_WIDTH_UP ) / 
VIEW_HEIGHT / 2.0f; 


据 此 整 可 以 沿 梯形 左 侧 的 矢 边 同 左 方向 移动 。 


这 样 我 们 就 通过 一 张 梯 形 图 形 以 及 图 形 线 不 同 的 移动 速度 实现 了 有 立体 效果 的 
卷 动 ， 不 仅 没 有 使 用 任何 3D 计算 ， 甚 至 连 真 正 的 3D 绘图 系统 都 没有 用 到 。 在 
3D 绘图 系统 非常 昂贵 的 时 期 ， 这 无 疑 是 一 个 提高 游戏 表现 力 的 法 宝 。 而 在 3D 
绘图 已 经 比较 普遍 的 今天 ， 如 果 想 让 2D 游戏 多 少 也 呈现 出 一 些 立 体感 的 话 ， 这 
也 不 失 为 一 个 简单 的 方法 。 


2.6 [ 进 阶 ] 透视 理论 


K 人 Word 
视 景 体 (view frustum) 、 近 似 RANK/very hard 


上 一 小 节 中 我 们 讲解 了 有 纵深 感 的 卷 动 ， 可 以 通过 2D 表现 出 类 似 3D 的 效果 。 
本 小 节 就 让 我 们 来 更 详细 地 了 解 一 下 这 种 效果 背后 的 理论 依据 。 


在 2.5 节 中 ， 我 们 使 用 一 张 梯形 图 片 ， 并 根据 各 行 图 形 线 的 卷 动 速度 的 不 同 ， 实 
现 了 带 有 纵深 感 的 卷 动 效果 (也 称 为 透视 ) 。 | 

卷 动 的 示例 程序 Scroll_5_1.cpp， 就 会 发 现 其 实现 原理 并 不 难 ， 但 是 却 能 表现 出 
很 好 外 立体 苍 动 效果 。 本 小 节 就 让 我 们 从 理论 角度 论证 一 下 Scroll_ 4 人 的 实 
现 方式 是 否 完 


首先 来 思考 一 下 真正 的 3D 游戏 中 所 使 用 的 表现 纵深 感 的 方法 。 在 真正 的 3D 游 
戏 中 ， 会 使 用 视 景 体 这 一 概念 让 画面 产生 纵深 感 。 所 谓 视 景 体 ， 就 是 将 以 视点 
( 即 玩家 眼睛 的 坐标 ) 为 顶点 、 以 显示 咒 的 屏 医 为 展 面 的 四 角 椎 体 ， 沿 显 示 絮 
方向 延长 得 到 的 图 形 (参考 图 2-6-1 


图 2-6-1 3D 中 使 用 的 视 景 体 


想 要 得 到 虚拟 空间 中 某 个 点 在 显示 屏 上 的 显示 位 置 ， 只 需要 将 该 点 与 视点 连接 
得 到 一 条 直线 ， 然 后 计算 出 这 条 直线 与 屏幕 的 交点 即 可 。 这 个 交点 的 坐标 就 是 
该 点 在 屏幕 上 的 显示 位 置 。 通 过 这 种 方式 ， 就 可 以 简单 并 自然 地 通过 计算 实现 
远 处 物体 小 、 近 处 物体 大 的 显示 效果 。 


具体 来 计算 一 下 吧 。 假 设 显 示 屏 与 视点 的 距离 为 h ， 视 点 的 位 置 为 原点 (0, 0， 
0)。 些 时 如 有 果 想 要 得 知 虚 拟 空间 中 的 点 (x ,y ,2z) 在 显示 屏 上 对 应 的 显示 位 置 ， 
就 需要 将 空间 中 的 点 (x ,y,z)、 显 示 屏 以 及 视点 构造 一 个 如 图 2-6-1 所 示 的 三 角 
形 。 例 如 ， 假 设 显 示 屏 上 的 x 坐标 为 xp ， 则 有 xp :h=x:z 的 比例 关系 成 立 。 
可 得 到 


h 
即 此 时 位 于 某 坐 标的 点 的 x 坐标 与 y 坐标 ， 在 显示 屏 上 变 为 了 原来 的 z 售 。 
为 z 坐标 为 分 母 ， 所 以 z 坐标 越 大 ( 即 距离 视点 的 深度 越 大 ) ， 倍 率 越 小 ， 所 显 
示 的 物体 也 就 越 小 。 请 注意 当 z =h ， 即 z 坐标 正好 与 显示 屏 处 于 相同 位 置 时 ， 
倍率 正好 为 1 倍 ， 不 会 有 放大 或 缩小 。 


1 
3D 游戏 就 是 基于 这 样 的 原理 ， 来 显示 物体 的 放大 倍数 为 z 坐标 的 倒数 ， 即 > 倍 
的 。 假 设 透 过 我 们 的 屏幕 可 以 看 到 虚拟 世界 中 一 个 水 平 的 地 面 ， 那 么 屏幕 上 能 
显示 地 面 多 大 的 区 域 呢 ? 从 数学 角度 考虑 的 话 ， 可 以 将 这 个 问题 转化 为 : 用 一 
个 平面 去 切割 代表 视 景 体 的 四 角 椎 体 ， 求 可 以 得 到 的 图 形 。 在 上 面 的 例子 中 
首先 可 以 肯定 的 是 ， 地 面 在 屏幕 上 显示 的 区 域 ， 其 边界 肯定 都 为 直线 。 这 是 因 
为 视 景 体 模型 的 四 角 椎 体 中 ，4 个 侧面 全 部 由 平面 构成 ， 平 面 与 平面 相交 的 地 方 
会 形成 直线 。 另 外 ， 如 果 切 割 四 角 椎 体 的 平面 与 屏幕 的 上 端 〈 或 下 端 ) 平行 ， 
那么 这 种 情况 就 与 带 有 纵深 感 的 卷 动 相同 ， 屏 幕 所 对 应 的 显示 区 域 应 该 是 一 个 
梯形 (参考 图 2-6-2) 。 


图 2-6-2 视 景 体 的 断面 是 梯形 


需要 注意 的 是 ， 通 过 上 例 得 到 的 梯形 显示 区 域 ， 是 一 个 上 瓜 较 长 、 下 底 较 短 的 
倒 梯形 。 我 们 已 经 通过 实例 得 知 将 视 景 体 用 一 个 平面 切割 会 得 到 梯形 ， 因 此 应 
该 不 难 理解 使 用 梯形 的 图 片 进行 卷 动 ， 就 可 以 让 人 产生 纵深 感 。 只 是 这 种 单纯 
使 用 梯形 图 片 卷 动 与 使 用 真正 的 3D 所 得 到 的 结果 并 不 完全 一 样 。 因 为 将 屏幕 上 


的 图 形 线 投影 到 实际 的 地 面 时 ， 屏 幕 上 方 的 图 形 线 会 变 得 芷 松 ， 下 方 的 图 形 线 
变 得 密集 (参考 图 2-6-3) 


屏 禹 


| 
罕 


量 


/ 


地 面 
图 2-6-3 屏幕 上 方 的 图 形 线 间距 大 ， 下 方 间距 小 


因此 ， 如 2.5 闻 所 示 ， 将 梯形 图 片 简单 地 按 垂 直方 向 等 间距 切 分 为 图 形 线 并 进行 
卷 动 ， 会 让 纵深 感 变 得 不 明显 。 不 过 即便 存在 这 些 问题 ， 对 于 大 部 分 2D 游戏 来 
说 ， 通 过 这 种 方式 实现 的 立体 感 已 经 能 派 上 很 大 用 场 了 ， 一 般 也 不 会 有 人 能 注 
意 到 这 样 的 细节 。 


事实 上 游戏 世界 中 还 有 很 多 类 似 这 样 不 易 察觉 的 小 问题 。 因 为 即便 是 3D 游戏 中 
所 使 用 的 用 于 表现 纵深 感 的 视 景 体 ， 也 只 是 一 种 现实 世界 的 近似 模型 ， 多 少 也 
存在 一 些 误 差 。 而 视 景 体 模型 的 误差 ， 主要 是 因为 将 观察 者 的 视点 看 为 了 一 个 
点 。 人 类 的 眼睛 ， 虽 然 称 为 视点 ， 但 其 实 并 不 是 一 个 点 ， 光 线 会 首先 穿 过 一 定 
大 小 的 瞳孔 ， 然后 透 过 晶状体 聚焦 ， 最 后 在 半球 形 的 视网膜 上 成 像 。 因 此 如 果 
将 人 眼 的 构造 也 考虑 进来 的 话 ， 当 人 有 眼 位 于 显示 屏 的 正 对 面 一 定 距 离 时 ， 所 看 
到 的 图 像 是 正确 的 ， 而 用 户 一 旦 接近 或 远离 屏幕 ， 或 者 从 某 个 方向 斜视 显示 屏 
时 ， 所 以 想 要 显示 大 多 数 情况 下 都 正确 的 3D 图 像 其 
实 是 非常 难 的 。 


通常 在 简单 的 3D 显示 中 ， 只 要 不 是 那么 吹 毛 求 狐 ， 视 景 体 模型 是 足够 用 的 。 但 
在 某 些 极端 情况 下 ， 视 景 体 模型 的 局 限 性 束 会 暴露 出 来 。 比 如 现在 的 技术 可 以 
通过 向 两 腿 投影 不 同 的 图 像 ， 从 而 产生 真实 的 立体 效果 ， 此 时 双眼 会 分 别处 理 
各 自 的 视 景 体 模型 ， 然 后 通过 调整 视点 的 位 置 看 到 最 终 效果 。 向 双眼 投影 不 同 
图 像 时 ， 必 须 综 合 考虑 眼球 转动 的 方向 、 瞳孔 的 大 小 、 唱 状 体 的 焦距 等 因素 ， 


好 
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如 采 投 影 给 用 户 的 图 像 有 偏差 ， 用 户 的 视觉 系统 就 会 为 了 消除 视觉 的 不 真实 感 
进行 高 频率 运动 ， 严 重 时 还 会 引发 名 为 3D 坚 上 胺 症 的 症状 。 


在 不 远 的 未 来 ， 可 能 会 出 现 装载 了 更 高 技术 水 平 的 游戏 ， 可 以 根据 双眼 的 眼球 
位 置 、 方 向 、 瞳 孔 的 大 小 、 焦 距 的 位 置 等 ， 为 左右 两 只 眼睛 准确 地 投影 出 最 适 
合 的 图 像 。 但 就 我 个 人 而 言 ， 仅 仅 擎 握 基于 视 景 体 的 立体 效果 束 已 经 很 吃力 
了 ， 只 能 遥 视 那样 先进 的 技术 早日 得 以 实现 。 


第 3 章 ” 础 擅 检 测 


3.1 ”长 方形 物体 间 的 碰撞 检测 

3.2 ” 圆 形 与 圆 形 、 圆 形 与 长 方形 物体 间 的 磁 撞 检测 
3.3 ” 细 长 形 物体 与 圆 形 物体 间 的 碰撞 检测 

3.4 ”局 形 物体 的 碰撞 检测 

3.5 【[ 进 阶 ] 3D 的 碰撞 检测 


3.1 长 方形 物体 间 的 碰撞 检测 


Kewn Word 
“ a 和 矩形 国 德 摩根 定律 RANK/easy 


游戏 开发 中 一 个 必 不 可 少 的 要 素 当 属 碰 擅 检测 。 本 小 节 将 介绍 长 方形 〈 和 矩形 ) 
物体 间 的 碰 拉 检测 的 实现 。 


本 章 开 始 介绍 游戏 开发 中 必 不 可 少 的 碰撞 检测 的 实现 ， 而 本 小 节 将 首先 介绍 2D 
游戏 中 最 基本 的 长 方形 (和 矩形) 物体 之 间 的 碰撞 检测 。 


图 3-1-1 长 方形 物体 间 的 碰撞 检测 


示例 程序 CheckHit_1_1.cpp 实现 了 长 方形 物体 间 的 碰撞 检测 。 运 行 这 个 程序 会 
显示 “A” 与 “B” 两 个 长 方形 ,“A” 长 方形 可 以 通过 方向 键 移动 ， 当 其 与 “B” 长 方形 
重 委 〈 即 碰撞 ) 时 ， 颜 色 会 变 成 红色 。 这 个 程序 中 执行 碰撞 检测 的 部 分 如 代码 
清单 3-1-1 所 示 ， 会 运行 CheckHit 函数 。 


代码 清单 3-1-1 ”对 于 长 方形 物体 间 进 行 碰 擅 检测 的 CheckHit 画 数 
(CheckHit_1_1.cpp 片段 


037 
038 
039 
040 
041 
042 
043 
044 
045 
046 
047 
048 
049 
050 
051 


i 
{ 


nt CheckHit( F_RECT *prcRect1，F_RECT *prcRect2 ) // 磁 撞 检测 


int nResult = false; 


If ( ( prcRect1->fRight > prcRect2->fLeft ) && 
( prcRect1->fLeft < prcRect2->fRight ) ) 


{ 
if ( ( prcRect1->fBottom > prcRect2->fTop ) && 
( prcRect1->fTop < prcRect2->fBottom ) ) 
nResult = true; 
} 


return nResult,; 


052 | } 


CheckHit 函数 以 两 个 矩形 (长 方形 ) 作为 入 口 参数 。 代 表 和 矩形 的 F_RECT 结构 
体 的 定义 如 下 所 示 。 


代码 清单 3-1-2” F_RECT 结构 体 的 定义 (CheckHit_1_1.cpp 片段 ) 


017 | struct F_RECT { 

018 | float fLeft, fTop; // 左 、 上 
019 | float fRight, fBottom; // 右 、 下 
020 | }; 


0 的 坐标 与 右 下 角 的 坐标 来 描述 一 个 矩形 (参考 图 3- 
1-2) 。 
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图 3-1-2 结构 体 F_RECT 中 使 用 了 左上 及 右 下 的 坐标 


CheckHit 范 数 会 对 上 壕 形 式 的 两 个 矩形 物体 进行 碰撞 检测 。 检 测 过 程 中 前 先 会 
通过 下 面 两 行 代码 ， 对 水 平方 向 上 算 形 重合 的 可 能 性 进行 判定 。 


if ( ( prcRect1->fRight > prcRect2->fLeft ) && 
( prcRect1->fLeft < prcRect2->fRight ) ) 


为 了 便于 理解 ， 我 们 先 不 要 考虑 什么 情况 下 物体 是 可 能 重 营 的 ， 而 是 换个 角 

度 ， 想 一 想 什 么 情况 下 两 个 物体 是 不 可 能 重 车 的。 比如 有 和 窍 形 1、 和 矩形 2 两 个 矩 

形 ， 以 矩形 2 为 基准 (示例 程序 中 是 矩形 B，， 如 果 和 矩形 1 的 右 端 比 矩形 2 的 

左 端 还 靠 左 ， 那 么 就 可 以 认为 两 个 矩形 不 可 外 B 重 在 (参考 图 3-1-3 左 ) 。 同 理 ， 

如 果 和 矩形 1 的 左 端 比 窍 形 2 的 右 端 还 靠 右 ， 也 可 以 认为 两 个 矩形 不 可 能 重 巷 
(参考 图 3-1-3 右 ) 


矩形 1 的 右 端 比 矩 形 一 证 肖 还 等 左 矩形 1 的 左 端 比 矩 形 2 的 右 端 还 靠 右 


图 3-1-3 ”矩形 没有 重生 的 情况 


简 而 言 之 就 是 ， 当 和 盾 形 1 的 右 端 比 窍 形 2 的 左 端 靠 左 ， 或 矩形 1 的 左 端 比 矩 形 2 
Ts 两 个 矩形 是 不 可 和 E 重 琶 的 。 因 此 ， 在 与 上 述 结 论 相反 的 情 沉 

两 个 矩形 就 可 能 重 徐 ， 即 矩形 1 的 右 端 比 矩形 2 的 左 端 靠 右 ， 并 且 矩形 1 
i 的 右 端 靠 宕 时， 两 个 矩形 是 可 能 重合 的 。 - 述 理论 ， 只 要 认真 
思考 一 下 应 该 不 难 理解 ， 在 数学 上 称 为 德 摩根 定律 。 所 谓 德 摩根 定律 ， 用 程序 
员 习 惯 的 方式 来 书写 的 话 ， 就 是 当 有 bCondl 与 bCond2 两 个 条 件 时 ， 


if ( !( bcond1 || bcond2 ) ) 
这 


一 条 件 与 


if ( !bCond1 && !bCond2 ) 


条 件 在 任何 情况 下 都 是 等 价 的 。 同 时 ， 


if ( !( bcond1 && bcond2 ) ) 
if ( !bcond1 || !bCond2 ) 


条 件 在 任何 情况 下 也 是 等 价 的 。 用 文字 表述 就 是 ， 对 全 体 条 件 的 否 
以 分 解 为 对 每 个 于 条 件 的 要 定 。 只 是 这 时 逻辑 运算 AND 要 反 转 为 OR,， 要 
2 AND。 如 果 不 熟 记 德 摩根 定律 ， 虽 然 也 可 以 通过 逻辑 推导 得 出 同样 的 结 
， 但 推导 过 程 难免 要 占用 时 间 ， 所 以 还 是 背 下 来 比较 有 效率 。 


我 们 已 经 考虑 了 水 平方 向上 重合 的 情况 ， 接 下 来 对 垂直 方向 也 套用 同样 的 方 
就 可 以 得 到 结论 ， 当 和 矩形 1 的 下 端 比 矩 形 2 的 上 端 靠 下 ， 并 上 且 矩形 1 的 上 
端 比 矩形 2 的 下 端 靠 上 时 ， 垂 直方 向 上 矩形 1 与 矩形 2 是 可 能 重合 的 。 执 行 这 


El 


个 检 的 代码 如 下 所 示 。 


If ( ( prcRect1->fBottom > prcRect2->fTop ) && 
( prcRect1->fTop < prcRect2->fBottom ) ) 


当然 ， 上 述 检 测 运 行 的 前 提 和 条件， 是 在 水 平方 回 的 检测 中 已 经 判断 得 出 两 个 抢 
形 是 可 能 重 营 的 0 人 前提， 上 面 的 站 语句 也 不 会 执行 ) 。 因 此 当 垂 
直方 向 的 条 件 也 满足 时 ， 和 矩形 1 与 矩形 2 就 是 重 琶 的 。 此 时 ， 


nResult = true; 


变量 nResult 被 置 为 true， 并 作为 CheckHit EE 商 数 科 返 回信 返 回 。 而 如 果 水 平方 癌 
和 垂直 方向 的 条 件 都 不 满足 ， 抑 形 则 是 没有 重 到 的 ， 变 量 nResult 的 定义 部 分 


039 | int nResult = false; 


CC 


变量 nResult 的 初始 值 被 设置 为 false， 并 且 直 接 作为 返回 值 返 回 。 


在 上 面 的 讨论 中 ， 并 没有 考虑 两 个 矩形 正好 在 边界 碰撞 (或 者 说 接触 ， 的 情 
况 。 比 如 上 文中 我 们 将 与 “矩形 1 的 右 端 比 矩 形 2 的 开端 靠 赤 ?相反 的 情况 视 
为 “矩形 1 的 右 端 比 矩 形 2 的 左 端 靠 赤 >， 而 这 两 者 都 漏 反 了 一 种 情况 ， 即 “矩形 
1 的 右 端 与 矩形 2 的 左 端正 好 在 同一 位 置 *， 因 此 当 满足 这 个 边界 条 件 时 应 当 如 
何 处 理 ， 就 需要 好 好 考虑 一 个。 


而 在 上 文 的 示例 程序 CheckHit 1 1.cpp 中 ，CheckHit 函数 并 没有 处 理 两 端正 好 
位 于 同一 位 置 的 情况 。 这 是 由 于 考虑 到 矩形 是 基于 左上 角 及 右 下 角 的 坐标 绘制 
的 ， 而 在 现代 的 3D 硬件 中 ， 这 样 的 矩形 的 右 端 及 下 端的 最 后 1 像素 正好 会 被 省 
略 。 在 现代 的 3D 硬件 中 ， 比 如 要 绘制 左上 角 为 (10，10) 、 右 下 角 为 (20， 

20) 的 矩形 时 ， 最 左 端 的 第 10 像素 会 被 绘制 ， 而 最 右 端的 第 20 像素 一 般 则 不 
会 被 绘制 出 来 。 垂直 方向 也 一 样 ， 上 端的 第 10 像素 会 被 绘制 ， 而 最 下 端的 第 20 
像素 一 般 则 不 会 被 绘制 。 至 于 为 什么 有 这 样 的 设 定 ， 我 也 没有 详细 了 解 过 ， 但 
按照 这 样 的 设 定 ， 并 且 考 虑 到 让 碰撞 检测 的 可 视 化 歼 末 更 加 真实 ， 当 端 与 端 位 
于 同一 位 置 时 ， 我 们 人 为 设 定 其 为 没有 碰撞 。 读 者 可 以 将 CheckHit 1_1.cpp 中 
矩形 A 的 移动 速度 调 慢 (比如 1 帧 1 像素 ) ， 并 仔细 观察 就 会 发 现 ， 当 两 个 矩 
形 重合 时 会 判定 为 碰撞 ， 如 果 只 是 边缘 接触 则 会 另外 读者 也 
可 以 修改 CheckHit 函数 中 的 让 语句 ， 全 部 加 入 等 号 ， 即 


041 
041 


| if ( ( prcRect1->fRight >= prcRect2->fLeft ) && 
| 
043 | 
| 
| 


( prcRect1->fLeft <= prcRect2->fRight ) ) 


044 
045 


If ( ( prcRect1->fBottom >= prcRect2->fTop ) && 
( prcRect1->fTop <= prcRect2->fBottom ) ) 


这 样 就 可 以 让 端 与 端 位 于 同一 位 置 时 也 判定 为 碰撞 ， 那 么 当 两 个 短 形 仪 仪 边 绿 
接触 时 ， 也 满足 碰撞 检测 的 条 件 。 示例 程序 CheckHit_1_1.cpp 中 是 没有 等 号 


的 ， 所 以 端 与 端 在 同一 位 置 时 就 会 判定 为 没有 人 碰撞。 
不 过 上 面 的 处 理 方 式 还 不 能 作为 开发 类 似 程序 的 统一 标准 ， 因 为 在 众多 绘图 硬 


件 及 程序 库 中 ， 也 许 存 在 特例 会 将 图 形 的 右 端 及 下 端 也 进行 绘制 。 因 此 端 与 端 
在 同一 位 置 的 碰撞 检测 ， 还 是 需要 根据 具体 情况 来 决定 如 何 处 理 。 


3.2 ” 圆 形 与 圆 形 、 圆 形 与 长 方形 物体 间 的 碰撞 检测 


ken Word 


距离 、 勾 股 定理 ~ 平方 比较 RANK/normal 


游戏 中 的 碰 扩 检测， 并 不 只 限于 甜 形 物体 。 根 据 实际 需求 ， 有 时 候 也 需要 对 圆 
人 


本 小 节 将 介绍 圆 形 与 圆 形 、 圆 形 与 长 方形 物体 间 进 行 碰撞 检测 的 方法 。 


图 3-2-1 圆 形 物体 间 的 碰撞 检测 


2D 游 戏 中 经 常会 用 到 3.1 市 介绍 的 矩形 物体 间 的 碰撞 检测 。 这 主要 是 由 于 矩形 
物体 间 的 碰撞 检测 通过 一 些 简单 的 计算 就 可 以 实现 ， 在 一 些 低 端 机 器 上 也 能 流 
畅 地 运行 。 而 如 今 PC 及 游戏 机 都 已 经 远 入 高 性 能 时 代 ， 即 便 硕 撞 检 测 中 包含 一 
些 稍 复杂 的 运算 ， 大 部 分 情况 下 也 不 会 有 什么 问题 。 特 别 是 圆 形 物体 间 的 碰撞 
今 测 ， 由 于 计算 方法 相对 简单 ， 在 2D 游戏 中 也 会 经 常用 到 。 


那么 接 下 来 就 让 我 们 来 看 一 下 圆 形 物体 间 的 人 碰撞 检测 。 实 际 执行 的 程序 为 示例 
Uh 。 程序 中 重要 的 部 分 是 CheckHit 函数 的 内 容 ， 如 代码 清 
3-2-1 所 不 。 


代码 清单 3-2-1 ”对 圆 形 物体 进行 磁 接 检测 的 CheckHit 画 数 
(CheckHit_2_1.cpp 片 


034 | int CheckHit( F_CIRCLE *pcrCircle1, F_CIRCLE *pcrCircle2 ) // 人 碰撞 
检测 


035 | { 
036 | int nResult = false,; 
037 | float dx, dy; // 位 置 坐标 之 差 
038 | float ar; // 两 圆 半 径 之 和 
039 | float fDistSqr 

| 


040 


041 | dx = pcrCircle1->x - pcrCircle2->x; // JJ X 


042 | dy = pcrCircle1->y - pcrCircle2->y; // IyYy 

043 | fDistSqr = dx * dx + dy * dy; // 距离 的 平方 
044 | ar = pcrCircle1->r + pcrCircle2->r; 

045 | if ( fDistSqr 


其 中 被 作为 CheckHit 函数 的 参数 所 传递 的 FE_CIRCLE 结构 体 如 下 所 示 。 
代码 清单 3-2-2 F_CIRCLE 结构 体 的 定义 (CheckHit_2_1.cpp 片段 ) 


像 这 样 ， 程 序 会 通过 两 个 圆 的 圆心 及 半径 ， 来 检测 两 个 圆 是 否 有 碰撞 。 


至 于 具体 有 要 如 何 计 算 ， 可 能 数学 好 的 朋友 会 想到 : 检测 两 个 圆 是 否 有 区 点 ， 可 

9 然后 根据 判别 式 求解 其实 大 可 不 必 如 此 麻烦 。 判断 两 

SS 2 只 要 将 两 圆 圆心 之 间 的 距离 与 两 圆 的 半径 之 和 相 比 较 即 可 ( 参 
3-2-2) 。 


两 圆 圆心 间 的 距离 比 半径 之 和 大 


两 圆 圆心 间 的 距离 比 半径 之 和 小 


图 3-2-2 ”通过 比较 两 圆 圆心 间 的 距离 与 两 圆 半径 之 和 来 进行 碰撞 检测 
如 此 一 来 ， 就 无 需 再 考虑 一 个 圆 是 否 完全 包含 另 一 个 圆 或 者 两 圆 间 是 否 有 交点 
等 情况 ， 只 需要 一 个 条 件 就 可 以 进行 圆 形 物体 间 的 碰撞 检测 。 


那么 就 让 我 们 来 实际 比较 一 下 两 圆 圆心 间 的 距离 与 两 圆 半 径 之 和 吧 。 假 设 圆 1 
的 圆心 为 (x1,y1)， 圆 1 的 半径 为 r1 ， 圆 2 的 圆心 为 (x ,,y,)， 圆 2 的 半径 为 
r，， 两 圆 圆 心间 的 距离 为 1 ， 根 据 勾 股 定理 有 下 列 等 式 成 立 (参考 图 3-2-3) 。 


b= (rr) + (nn — 1) 


“1= V(r — rT2)? + (Wn — y)? 


然后 再 将 1 与 两 圆 的 半径 之 和 ri +r ,5 比较， 如果 小 于 则 可 判定 为 磁 擅 。 


WY 


图 3-2-3 根据 勾 股 定理 计算 两 圆 圆 心 距离 


在 示例 程序 CheckHit_2_1.cpp 的 CheckHit 函数 中 ， 为 了 节省 计算 时 间 ， 并 没有 
完全 按照 上 面 的 等 式 书写 语句 ， 而 是 使 用 了 略 有 不 同 的 判定 方法 。 可 以 看 到 在 
示例 程序 的 CheckHit 函数 中 ， 并 没有 计算 平方 根 的 sqrtf 函数 。 这 是 因为 该 程序 
并 没有 直接 使 用 圆心 间 的 距离 1 ， 而 是 通过 比较 距离 的 平方 来 进行 的 碰撞 判定 。 
这 使 用 了 数学 中 的 当 ali>0、ay>0 时 ， 如 果 ai < a ， 则 必 有 al < ay 这 
一 原理 《可 参考 小 节 末 的 POINT 部 分 ) 。 因 为 参与 比较 的 对 象 为 距离 ， 都 为 非 
负数 ， 所 以 距离 之 间 的 比较 ， 与 距离 的 平方 之 间 的 比较 ， 所 得 到 的 结果 是 一 样 
的 。 这 个 结论 在 游戏 的 碰撞 检测 中 有 时 会 用 到 ， 请 读者 最 好 能 记 下 来 。 


POINT ”由 于 距离 不 可 能 为 负数 ， 所 以 距离 之 间 的 比较 ， 与 距离 的 平方 之 
间 的 比较 ， 其 结果 是 一 样 的， 直接 比较 平方 还 能 节省 计算 时 间 。 


将 平方 之 间 的 比较 写成 语句 ， 首 先 当 


[<rit+t+r, 


时 ， 两 圆 磁 撞 。 由 于 1>0 且 r1+r,>0， 因 此 分 别 对 两 边 平方 ， 得 到 


站 


由 勾 股 定理 可 知 12= (x1-x2)*+(y1-y2)， 将 其 代入 上 式 ， 得 到 
(CX1-xX2) +O1-y2Y < (ritr,y 
得 到 了 CheckHit 函数 中 的 条 件 语句 。 


通过 这 种 方式 来 回避 平方 根 运 算是 非常 有 意义 的 ， 因 为 通过 对 平方 进行 比较 ， 
可 以 将 平方 根 运算 替换 为 乘法 运算 。 而 平方 根 运算 的 速度 依赖 于 CPU 的 浮 点 数 
运算 能 力 ， 与 乘法 运算 所 花费 的 时 间 有 巨大 差别 。 根 据 硬件 结构 的 不 同 ， 两 者 
的 老 距 有 时 可 达 10 倍 以 上 ， 因 此 凡 征 能 回避 平方 根 运 算 的 地 方 ， 都 应 该 尽 可 能 
地 在 程序 中 使 用 上 述 方法 。 


。 圆 形 与 长 方形 的 碰撞 检测 


接 下 来 就 让 我 们 来 学 习 圆 形 与 长 方形 的 碰撞 检测 。 由 于 圆 形 与 长 方形 的 形 
状 存在 差异 ， 这 类 碰撞 检测 会 稍微 复杂 一 些 。 最 终 实 现 的 程序 请 参考 示例 
程序 CheckHit_2_2.cpp。 这 个 程序 中 重要 的 部 分 是 CheckHit 函数 的 内 容 ， 
由 于 程序 比较 长 ， 这 里 就 不 直接 引用 代码 了 。 本 小 节 仅 从 理论 层面 讲解 一 
下 实现 的 思路 ， 具 体 代码 请 读者 自行 查阅 示例 程序 〈 源 代码 下 载 地 址 请 参 
2 Ns 


在 CheckHit_2_2.cpp 的 CheckHit 函数 中 ， 主 要 可 以 分 为 以 下 两 个 阶段 进 
人 矶 撞 检 测 。 


1. 将 需要 检测 的 长 方形 ， 在 上 下 左右 4 个 方向 均 向 外 扩张 ， 扩 张 的 长 度 
为 圆 半 径 r ， 如 果 扩张 后 得 到 新 的 长 方形 内 包含 了 圆心 坐标 ， 则 认为 两 
物体 具备 碰撞 的 可 能 人 反之 出 无 总 择 的 可 能 


> 在 满足 条 件 1 ， 博 况 下 ， 如 果 圆 心 坐标 在 原 长 方形 以 外 、 扩 张 后 的 
长 方形 的 左上 、 左 下 、 右 上、 右 下 四 个 角 处 ， 且 圆 内 没有 包含 长 方形 
最 近 的 顶点 ， 认为 两 物体 没有 碰撞 。 


步骤 1、2 的 判定 请 参考 图 3-2-4。 之 所 以 通过 这 种 方式 检测 ， 是 因为 按照 
一 般 的 思维 方式 ， 仅 仅 考虑 长 方形 的 各 边 是 否 与 圆 形 相 交 ， 是 不 够 全 面 
的 ， 还 必须 考虑 到 圆 形 完全 包含 长 方形 ， 或 长 方形 完全 包含 圆 形 等 情况 。 
因此 在 CheckHit 2_2.cpp 中 ， 并 没有 去 检查 长 方形 的 各 边 与 圆周 是 否 相 
交 ， 而 是 针对 长 方形 包含 圆 形 这 一 特殊 情况 ， 先 进行 了 条 件 1 的 检测 ， 然 
后 又 针对 圆 形 包含 长 方形 的 情况 ， 进 行 了 条 件 2 的 检测 。 


图 3-2-4 将 长 方形 向 外 扩张 圆 半 径 r 来 进行 碰撞 检测 


具体 来 说 ， 首 先 条 件 1 的 检测 是 以 长 方形 为 中 心 来 考虑 的 。 之 所 以 将 各 边 
向 各 方向 扩张 半径 r 形成 新 的 长 方形 ， 是 因为 圆 的 半径 为 r ， 当 圆心 在 原 长 
方形 之 外 ， 且 与 长 方形 的 距离 为 r 时 ， 圆 与 长 方形 也 有 可 能 发 生 辜 接 。 但 
是 扩张 后 的 长 方形 的 四 个 角 ， 即 边 长 为 r 的 正方 形 区 域 则 需要 特殊 判断 
(参考 图 3-2-4) 。 因 为 在 这 个 区 域 中 包含 圆心 的 情况 下 ， 仍 然 存在 圆 的 上 
下 左右 端 都 与 原 长 方形 不 相交 的 可 能 性 ， 这 时 就 需要 根据 条 件 2 进行 判 
断 。 条 件 2 的 检测 是 以 圆 形 为 中 心 的 ， 从 这 个 角度 出 发 来 考虑 圆 形 不 包含 
长 方形 的 情况 应 该 更 加 容易 理解 。 判 断 圆 形 不 包含 长 方形 ， 或 者 以 圆 形 为 
中 心 检测 时 判断 二 者 没有 发 生 碰 接 的 最 简单 的 条 件 是 : 长 方形 的 4 个 顶点 
中 ， 离 圆心 最 近 的 顶点 没有 在 圆 内 。 即 当 满 足 条 件 1 而 不 满足 条 件 2 时， 
就 可 以 认为 两 物体 没 有 碰撞 。 之 所 以 按 这 样 的 顺序 进行 两 个 阶段 的 判定 ， 
是 为 了 尺 可 能 地 减少 计算 量 。 首 先进 行 简单 的 判定 ， 将 明显 不 是 碰撞 的 情 
况 排除 ， 并 判断 是 否 有 必要 进行 有 距离 (确切 来 说 是 距离 的 平方 ) 计算 的 
条 件 2 的 判定 ， 而 只 有 在 必要 时 ， 才 会 进行 最 终 的 计算 处 理 。 


POINTI 


当 ai1>0 且 av>0 时 ， 如 果 a1“<a，“ 则 aj<a, 的 证 明 


_a 1 2 一 _a ， 2 


将 a,? 移 项 到 左边 得 到 
人 
将 左边 因数 分 解 得 到 
Ca_li+_ao)Cal- .a2)<0 


由 于 ail>0 且 ar>0 时 ，ali+a>0， 这样 一 个 正 值 乘 以 (al -a，) 为 
负 值 ， 所 以 (al -ay ) 为 负 值 ， 即 


(ai1- a2)<0 
将 av 移 项 到 右边 得 到 
a1<_a, 


即 得 到 证 明 。 另 外 ， 根 据 y=x? 这 个 画 数 在 x>0 的 范围 内 是 单调 递增 
画 数 ， 也 可 以 证 明 当 q1>0 且 a,>0 时 ， 如果 aj?<a，?,， 则 qi<a 


O 
2 


3.3 ” 细 长 形 物体 与 圆 形 物 体 间 的 碰 擅 检测 


ken Wo rd RANK/hard 
点 与 线段 的 距离 、 内 积 、 微 分 


接 下 来 让 我 们 一 起 学 习 圆 形 与 细 长 形 物体 的 碰 擅 检测 。 在 游戏 中 ， 细 长 形 物体 
可 以 被 用 于 显示 激光 或 剑 等 。 


本 小 节 将 讲解 圆 形 与 细 长 形 物体 (如 激光 或 剑 ) 的 碰撞 检测 。 比 如 从 某 个 斜 方 
向 发 射 激 光 等 时 ， 如 果 仍 然 使 用 2D 碰撞 检测 中 的 常规 手段 ， 将 光线 作为 长 方形 
物体 处 理 的 话 ， 就 会 非常 脐 烦 ， 所 以 需要 对 细 长 形 物 体 做 特殊 处 理 。 


图 3-3-1 细 长 形 物体 与 圆 形 物体 的 磁 撞 检测 


下 面 就 来 一 起 看 一 下 细 长 形 物体 与 圆 形 物体 间 的 碰撞 检测 吧 。 请 参考 示例 程序 
。 程序 中 重要 的 部 分 是 CheckHit 函数 的 内 容 ， 如 代码 清单 3-3- 
1 所 示 。 


代码 清单 3-3-1 ”执行 细 长 形 物 体 与 圆 形 物体 磁 擅 检测 的 CheckHit 画 数 
(CheckHit_3_1.cpp 片 段 ) 


043 


// 出 


| 


| int CheckHit( F_CIRCLE *pcrCircle，F_RECT_CIRCLE *prcRectCircle ) 


童 检测 


044 
045 
046 
047 
048 
049 
050 
051 
052 
053 


054 


| { 


int 

float 
float 
float 
float 


float 


nResult = false; 


dx, dy; // 位 置 坐标 之 差 

t; 

mx, my; // 对 应 最 短 距离 的 坐标 
ar; // 两 物体 的 半径 之 和 
fDistSqr,; 


dx = pcrCircle->x - prcRectCircle->x; 


dy = pcrCircle->y - prcRectCircle->y; 


// IX 


// ZY 


055 | t = ( prcRectCircle->vx * dx + prcRectCircle->vy * dy ) / 


056 | ( prcRectCircle->vx * prcRectCircle->vx + prcRectCircle->vy * 
prcRectCircle->vy ); 

057 | if ( t 0.0f="" )="" t="0,0f;">t 

的 下 限 

058 | if (t>1.0f )t = 1.0f; //t 

的 上 限 

059 | mx = prcRectCircle->vx * t + prcRectCircle->x; // 有 最 短 距离 的 线段 上 
的 坐标 

060 | my = prcRectCircle->vy * t + prcRectCircle->y; 

061 | fDistSqr = ( mx - pcrCircle->x ) * ( mx - pcrCircle->x ) + 

062 | ( my - pcrcircle->y ) * ( my - pcrcircle->y ); // 距离 
的 平方 

063 | ar = pcrCircle->r + prcRectCircle->r,; 

064 | if ( fDistSqr 


函数 接收 两 个 参数 ， 一 个 是 代表 圆 的 F_CIRCLE 结构 体 指 针 ， 另 一 个 是 代表 由 


一 个 长 方形 和 两 端的 两 个 半圆 形 组 成 的 细 长 形 物体 的 FE_RECT_CIRCLE 结构 体 
指针 。 当 两 者 碰撞 时 ， 返 回 值 为 tue。F_CIRCLE 结构 体 通 过 圆心 坐标 与 半径 来 
表示 一 个 圆 ，F_RECT_CIRCLE 结构 体 则 通过 一 个 点 以 及 一 个 癌 量 来 表示 一 个 
线段 ， 同 时 该 结构 体 还 包含 到 此 线段 的 有 效 距 离 ， 最 终 就 可 以 表示 一 个 倾斜 的 
长 方形 两 端 附加 半圆 形 的 细 长 图 形 (参考 图 3-3-2) 。 


图 3-3-2 F_RECT_CIRCLE 结构 体 表示 的 图 形 


为 了 检测 这 两 个 图 形 是 否 人 碰撞 ， 首 先 需要 计算 F_CIRCLE 结构 体 的 圆心 坐标 到 
F_RECT_CIRCLE 结构 体 中 的 线段 的 最 短 距离 ， 然 后 再 计算 “Ff_CIRCLE 结构 体 
的 圆 半 径 + 到 F_RECT_CIRCLE 结构 体 中 的 线段 的 有 效 距 离 ”， 如 果 最 短 距 离 小 


于 后 者 ， 则 可 认为 两 者 碰撞 。 用 语言 表达 可 能 会 比较 难 理解 ， 这 里 我 们 重新 用 
数学 算式 来 表达 ， 设 圆心 与 线段 的 最 短 距 离 为 min， 图 的 半径 为 r1 ， 到 线段 的 
有 效 距 离 为 《参考 向 3-3-3) ， 当 满足 


limlt;T1 + Ta 


时 ， 两 物体 碰撞 。 


图 3-3-3 通过 圆心 坐标 与 到 细 长 形 物体 的 线段 的 最 短 距离 进行 碰撞 检测 


这 里 面 的 问题 是 ， 点 与 线段 的 最 短 距离 1 min 要 如 何 计算 。 如 果 将 点 与 线段 的 距 
离 更 改 为 把 与 直线 的 距离 ， 则 可 以 利用 下 面 这 个 有 名 的 公式 。 


直线 ax +by +c =0 与 点 (x 0 ,yo ) 的 最 短 距 离 为 


laro TT byo 二 c| 
ro 
Va2 十 了 


但 征 目 前 我 们 想 要 计算 的 ， 并 不 是 点 到 一 条 无 限 延长 的 直线 的 距离 ， 而 是 点 到 
一 条 有 起 点 和 终点 的 线段 的 距离 ， 因 此 无 法 直接 套用 上 面 的 公式 。 当 然 如 果 肯 


伦 时 间 ， 也 可 以 使 用 上 面 的 公式 得 到 一 个 可 行 的 算法 ， 但 是 我 们 不 打算 这 样 

做 。 这 是 因为 公式 中 直线 是 使 用 ax +by +c =0 的 形式 来 表示 的 ， 而 在 程序 中 ， 为 
了 适应 更 多 的 场景 ， 直 线 往往 都 使 用 向 量 的 形式 来 表示 ， 即 用 向 量 a、b 将 直 
线 上 的 位 置 癌 量 p 表示 为 


p=at+b 


这 样 束 可 以 适用 于 更 多 的 场景 。 如 来 想 从 事 游戏 开发 ， 束 应 该 学 会 用 向 量 这 种 
形式 来 表示 直线 。 


POINT ”游戏 编程 中 经 常 使 用 向 量 来 表示 直线 。 
可 能 有 人 已 经 注意 到 了 ， 传 给 CheckHit 函数 的 参数 FE_RECT_CIRCLE 结构 体 ， 


正 古 使 用 向 量 形 式 表 示 的 线段 。 其 中 位 置 向 量 b 表示 直线 所 通过 的 一 点 的 位 
置 ， 向 量 a 表示 直线 延伸 的 方向 (参考 图 3-3-4) 。 


0 
图 3-3-4 F_RECT_CIRCLE 结构 体 中 线段 的 表示 


但 是 上 面 的 式 子 只 能 表示 一 条 无 限 延伸 的 直线 ， 因 此 我 们 认为 CheckHit 函数 中 
还 隐 含 了 条 件 0<t< 1。 即 结构 体 最 终 表 示 的 是 以 位 置 向 量 b 与 位 置 向 量 b+a 
为 两 端的 线段 。 此 时 该 线段 与 点 (xy ,yo ) 的 最 短 距离 应 该 如 何 计算 呢 ? 可 以 从 
以 下 两 点 考虑 。 


1. 将 线段 上 的 点 p=at+b(0<tz<1) 与 点 (x0,yo0) 的 距离 表示 为 t 的 范 
数 ， 然 后 对 t 进 行 微分 ， 求 得 距离 最 小 时 的 t。 


2. 过 点 (x0 ,yo ) 问 包含 线段 的 直线 p=at+b 做 一 条 垂 线 ， 使 用 向 量 的 内 

积 求 得 距离 的 最 小 值 
下 面 首先 介绍 方法 1。 此 时 令 线段 上 的 点 p 为 (p ,py)， 疝 量 a 为 (a ,aqy)， 辣 
量 b 为 (b,,b,)，p=at+b(0<t<1) 可 以 分 解 表示 为 


)7 二 drt+b | ， 
I ~” (0<t<1) 
py = ayt+b, 


Le] 


m+ 


设 此 线段 上 的 点 与 点 Ko ,yo ) 的 距离 为 1， 根 据 勾 股 定理 有 


了 


P= (pr — Zo) + (py — Yo) 
(azt + b; — zo)2 + (ayt + b, — yo): 


2,2 \ 2 2 .2 1 \ 2 
= azrt + 2arlbz — TO)t + To+ ot + 2aylby — Yo)t+ 


1 -2 2\22 : | A a , 2 2 
= (az + ay)t 十 2{az (bz — Zo) + ay(by — Yo)}Ht+zo+t+Wn 


根据 我 们 之 前 得 到 的 结论 ， 可 知 当 11 >0 且 1,>0 时 ， 如 果 11?>1,? 则 必 有 1 
>1，。 而 这 里 的 距离 1 必定 是 大 于 0 的 ， 所 以 如 果 112>1，“ 则 必 有 1 >1, 这 个 
结论 成 立 。 换 言 之 ， 求 距离 平方 最 小 值 对 应 的 ! ， 等 同 于 求 距 离 最 小 值 所 对 应 的 
t。 因 此 上 式 


2 (az a )t + 2{azr (bz — ZT0) + ay(by — Yo) }t + Zp 十 Dh 


中 ,， 令 1? 最 小 的 +t， 就 是 点 到 线段 的 最 短 距离 所 对 应 的 +:。 为 了 求 1? 的 最 小 


值 ， 将 等 式 用 上 进行 微分 ， 得 到 
1f72) 了 也 
ET 二 2(az 十 ay 六 十 2{azfpa — zo) 十 aylby — yo)} 


d(22) 

要 求 使 dt 为 零 的 t 的 值 ， 需 要 让 1? 取 极 值 ( 极 大 值 或 极 小 值 ， 在 上 式 中 应 
该 为 极 小 值 。 因 为 对 1? 进行 1 的 2 阶 微分 ( 即 对 上 式 再 进行 一 次 微分 ) ， 可 得 
d (DD) 村 2(a2 +a2)/>0 ea pp 
dt? i 0"> ”( 不 过 向 量 a 并 不 是 零 向 量 ) 


等 式 必 然 为 正 ， 因 此 画 数 的 2 阶 微分 为 正 时 所 取 的 极 值 为 极 小 值 


dr) 
综 上 ， 通 过 dt 为 零 的 t 的 值 ， 我 们 就 可 以 计算 出 线段 与 点 的 最 短 距离 。 下 面 
让 我 们 通过 如 下 步骤 求 得 + 。 


区 


dfz2) 
dt 
2(a2 十 a )t 一 一 2{az (bi 一 To0) 十 aylby 4 yo0)} 


一 2(a2 十 ay a 2{azrlb; 一 Z0) 十 al (b, ;— yo)} =0 


_ azrlTo — bz) + (aylyo — by) 
wi ra py | 
(az 十 ay) 


这 就 是 CheckHit 函数 中 


053 | dx = pcrCircle->x - prcRectCircle->x; // 4 x 

054 | dy = pcrCircle->y - prcRectCircle->y; //4Yy 

055 | t = ( prcRectCircle->vx * dx + prcRectCircle->vy * dy ) / 

056 | ( prcRectCircle->vx * prcRectCircle->vx + prcRectCircle->vy * 


prcRectCircle->vy ); 


这 部 分 等 式 的 由 来 。 请 注意 程序 中 的 变量 与 数学 等 式 的 对 应 关系 为 


ar = prcRectCircle— / > vx 


au = precRectCircle— > vy 

(To — b7) = dx 

(yo — by) = dy \text{vx}\&a_y=\text{prcRectCircle}->\text{vy}\& 
(x_0-b_x)=\text{dx}\&(y_0-b_y)=\text{dy}Mend{aligned}"> 


但 是 这 样 计算 出 的 上 并 不 一 定 满足 线段 的 条 件 0<t<1。 因此 在 CheckHit 函数 
中 ， _ 如果 (没有 在 0 到 1 的 区 间 内 ， 会 通过 下 面 的 方式 将 上 收敛 在 0 一 1 的 范围 


657 | if ( t 9.0f="" )="" t="0.0f;">t 
的 下 限 
958 | if (t >1.0f ) t= 1.0f; J/ tt 
的 上 限 


即 当 t 比 0 小 时 令 t 等 于 0， 当 t 比 1 大 时 令 t 等 于 1。 这 也 说 明了 求 线段 与 点 的 
最 短 距离 t 时 ，1* 是 1 的 二 次 函数 ， 其 极 小 值 只 有 一 个 。 


。 使 用 求 得 的 上 计算 线段 与 点 的 最 短 距离 


0 求 得 的 还 不 是 线段 与 点 的 最 短 距离 ， 而 是 可 以 令 线 段 与 点 有 
是 距离 的 !。CheckHit 范 数 会 继续 使 用 t 计算 线 段 与 点 的 最 短 距离 (确切 
说 是 最 得 距离 的 平方) 。 为 此 首先 需要 通过 以 下 方法 求 得 有 最 短 距离 的 线 


段 上 的 坐标 。 


059 | mx = prcRectCircle->vx * t + prcRectCircle->x; // 有 最 短 距 
离 的 线段 上 的 坐标 


060 | my = prcRectCircle->vy * t + prcRectCircle->y; 


是 将 上 代入 线段 的 等 式 


pr = Qzt 十 px 


Py = Qy t+b, 


得 到 的 。 接 下 来 使 用 勾 股 定理 ， 通 过 如 下 方法 求 得 最 短 距离 的 平方 。 


061 | fDistSqr = ( mx - pcrCircle->x ) * ( mx - pcrCircle->x ) + 
062 | ( my - pcrCircle->y ) * ( my - pcrCircle->y ); 
// 距离 的 平方 


将 所 得 最 外 年 距离 的 平方 〈 即 变量 fDistSgr 的 值 ) ， 与 FF_CIRCLE 结构 体 的 
圆 半径 + 到 F_RECT_CIRCLE 结构 体 中 的 线段 的 有 效 距离 ”的 平方 相 比 较 ， 

如 果 前 者 小 于 后 者 ， 则 认为 细 长 形 物体 与 圆 碰 撞 。 这 在 程序 中 体现 为 以 下 
的 站 语句 ， 如 果 磁 撞 则 将 表示 结果 的 变量 nResult 置 为 true。 


ar = pcrCircle->r + prcRectCircle->r,; 
if ( fDistSqr < ar * ar ) { // 和 且 拉 
nResult = true; 


而 由 于 变量 nResult 在 声明 时 已 经 设 默认 值 为 false， 如 果 上 面 的 站 语句 不 满 


足 ， 则 变量 nResult 仍 返 回 false。 最 终 当 人 页 撞 时 nResult 为 true， 未 合 撞 时 
nResult 为 false， 并 通过 以 下 语句 作为 函数 的 返回 值 返回 。 


068 | return nResult; 


本 市 我 们 介绍 了 两 端 为 圆 形 的 细 长 形 物 体 的 碰撞 检测 ， 之 所 以 选择 这 样 一 
个 有 点 奇怪 的 图 形 ， 而 不 使 用 倾斜 的 长 方形 ， 是 出 于 一 些 考量 的 。 首 先 ， 
倾斜 的 长 方形 与 圆 形 的 磁 撞 检测 会 有 非常 多 的 条 件 分 文 ， 导 致 程序 很 长 。 
对 于 惯用 指令 流水 线 (instruction pipeline) 和 推测 执行 (speculation 


execution) 的 现代 CPU 来 说 ， 过 多 的 分 文 条 件 不 利于 速度 的 优化 。 其 次 ， 
使 用 斜 长 方形 作为 碰 挤 检测 的 区 域 寺 ， 最 终 呈 现 的 效果 可 能 会 有 一 些 不 合 


理 的 地 方 《即便 从 数学 的 角度 来 看 是 正确 的 ) 。 特 别 是 当 男 一 个 图 形 擦 过 


长 方形 的 四 个 角 时 ， 这 种 情况 会 被 认为 发 生 了 碰撞， 而 肉眼 看 上 去 却 是 没 


有 碰 擅 的， 这样 束 在 无 形 中 给 玩家 市 来 了 困扰 。 因 此 为 了 让 细 长 物体 的 两 
端 更 好 地 符合 现实 世界 的 碰撞 现象 ， 特 意 将 四 角 处 理 为 了 圆 形 。 


类 似 本 小 市 这 样 的 复杂 图 形 的 碰撞 检测 判定 ， 基 本 上 


民 难 在 大 脑 中 计算 整 


个 过 程 ， 需 要 在 纸 上 一 步 步 地 演算 。 而 真正 的 游戏 开发 ， 更 是 不 仅 要 能 在 
纸 上 完 成 演算 过 程 ， 还 要 能 将 其 代码 化 ， 有 意 成 为 游戏 开发 者 的 读者 朋 


友 ， 请 以 此 为 目标 努力 吧 。 


3.4 ”局 形 物 体 的 碰撞 检测 
ken Word 


RANK/hard 


条 件 划 分 、 向 量 的 运算 、 向 量 的 内 分 点 、 圆 的 方程 式 


游戏 都 是 以 角色 为 中 心 的 ， 角 色 与 一 定 区 域 的 碰 接 检测 时 有 发 生 ， 而 检测 区 域 
则 以 扇形 居多 。 与 局 形 的 碰 擅 检测 中 ， 条 件 划分 是 极为 重要 的 。 


本 小 市 将 讲解 局 形 物体 与 圆 形 物体 的 碰撞 检测 ， 这 在 挥舞 剑 等 细 长 物体 时 的 碰 
撞 检 测 等 中 经 常会 用 到 。 


图 3-4-1 ”扇形 物体 与 圆 形 物 体 的 碰 擅 检测 


示例 程序 CheckHit 4_1.cpp 实现 了 局 形 物体 的 碰撞 检测 。 程 序 中 重要 的 部 分 是 


CheckHit 函数 的 内 容 ， 如 代码 清单 3-4-1 所 示 。 


代码 清单 3-4-1 ”执行 扇形 物体 与 圆 形 物体 碰 接 检测 的 CheckHit 画 数 


(CheckHit_4_1.cpp 片段 ) 


// 碰撞 检测 


049 | int CheckHit( F_CIRCLE *pcrCircle, F_FAN *pfaFan ) 
050 | { 

051 | int nResult = false; 

052 | 

053 | float dx, dy; 

054 | float fAlpha, fBeta; 

055 | float fDelta; 

056 | float ar; 

057 | float fDistSqr; 

058 | float a, b, c; 

059 | float d; 

060 | float t; 

061 | 

062 | dx = pcrCircle->x - pfaFan->x; dy = pcrCircle->y - pfaFan->y; 
063 | fDistSqr = dx * dx + dy * dy; 

064 | if ( fDistSqr < pcrCircle->r * pcrCircle->r ) { 
065 | nResult = true; 

066 | } 


>VyY1I， 


© 
Oo 
人 


>Vvy2; 


© 
OO 
O) 


else { 
fDelta = pfaFan->vx1 * pfaFan->vy2 - pfaFan->vx2 * pfaFan- 


fAlpha = ( dx * pfaFan->vy2 - dy * pfaFan->vx2 ) / fDelta; 
fBeta = ( -dx * pfaFan->vy1i + dy * pfaFan->vx1 ) / fDelta; 
if ( ( fAlpha >= 0.0f ) && ( fBeta >= 0.0f ) ) { 
ar = pfaFan->r + pcrCircle->r; 
if ( fDistSqr <= ar * ar ) { 
nResult = true,; 


a = pfaFan->vx1 * pfaFan->vx1 + pfaFan->vy1 * pfaFan- 


-( pfaFan->vx1 * dx + pfaFan->Vvy1 * dy ); 
dx * dx + dy * dy - pcrCircle->r * pcrCircle->r; 
brb-arxci 
if (d >= 0.0f ) { 
t=( -b - sqrtf(d ) )/a; 
if ( (tt >= 0.0f ) && (tt <= 1.0f ) ) { 
nResult = true; 


} 
} 
a = pfaFan->vx2 * pfaFan->vx2 + pfaFan->vy2 * pfaFan- 
b= -( pfaFan->vx2 * dx + pfaFan->vy2 * dy ); 
c= dx* dx+dy * dy - pcrCcircle->r * pcrCircle->r; 
d=b*b-a*ce; 
if (dd >= 0.0f ) { 


t=( -b - sqrtf(d ) )/a; 

if ( (t >= 0.0f ) && ( t <= 1.0f ) ) { 
nResult = true; 

} 


} 


return nResult; 


程序 很 长 。 这 是 因为 扇形 的 碰撞 检测 需要 分 别处 理 很 多 不 同 的 条 件 分 文 。 虽 然 


可 能 会 有 人 


SR 


觉得 程序 太 长 不 好 理解 ， 但 请 耐 下心 来 ， 让 我 们 一 起 来 逐步 看 一 


首先 看 问 男 数 传递 的 参数 。 传 递 的 结构 体 中 ，F_CIRCLE 结构 体 表示 圆 形 ， 通 过 


圆心 侍 标 及 半径 表示 符 定 的 图 。F_EAN 绛 和 你 雪 下 属 形 ， 结 构 体 的 成 员 拒 J 
去 可 能 有 有 思 配 ， 因为 有 很 多 与 磁 撞 检测 无 关 的 成 员 。 与 储 撞 检测 有 关 的 部 分 ， 
与 两 个 向 重 ， 它 们 可 以 共同 表 条 一 个 特定 的 扇形 (参考 图 3.4-2)， 其 


是 一 个 点 


PAA 


加 


他 的 成 员 ( 角 ) 可 以 午时 忽略 


图 3-4-2 ”一 个 点 与 两 个 向 量 表示 扇形 

CheckHit 函数 中 ， 会 对 圆心 坐标 及 半径 表示 的 圆 ， 与 一 点 加 两 个 向 量 表示 的 扇 
形 进 行 碰撞 检测 。 此 时 只 用 一 个 算式 很 难 覆 盖 所 有 可 能 的 碰撞 条 件 ， 需 要 先 根 
据 不 同 的 条 件 进行 划分 。 至 于 如 何 划 分 ， 可 能 会 有 很 多 种 思路 ， 我 们 采用 的 划 
分 方式 如 示例 程序 CheckHit_4_1.cpp 所 示 ， 有 以 下 几 种 情况 。 

条 件 1. 扇形 的 圆心 点 ， 如 果 在 圆 形 内 部 则 表示 碰撞 (参考 图 3-4-3 左 ) 。 
关于 这 一 点 ， 应 该 无 需 特别 说 明 。 下 文 将 主要 考虑 扇形 的 圆心 在 圆 外 的 情况 。 
条 件 2. 圆 的 圆心 坐标 ， 如 果 在 扇形 内 部 则 表示 碰撞 (参考 图 3-4-3 右 ) 。 
ee 只 要 圆 的 圆心 坐标 被 扇形 包含 ， 就 认为 两 者 是 倍 撞 


> 


图 3-4-3 扇形 与 圆 形 磁 撞 时 的 位 置 关 系 (其 一 ) 


那么 上 面 的 条 件 是 否 已 经 禾 震 了 所 有 的 情况 呢 ? 不 ， 还 有 遗漏 。 即 便 两 者 的 圆 
心 坐标 都 没有 被 对 方 包含 ， 图 形 的 周边 部 分 如 果 有 交 琶 ,那么 两 个 图 形 仍 然 会 
人 碰撞。 因此 需要 追加 以 下 两 个 条 件 : 


条 件 2' . 圆 形 的 圆心 坐标 在 组 成 属 形 的 两 个 向 量 之 间 ， 并 且 圆 形 的 圆心 坐标 
到 局 形 的 圆心 坐标 的 距离 ， 小 于 “ 圆 形 半径 + 局 形 半 径 " 时 ， 认 为 两 图 形 碰 
撞 (参考 图 3-4-4 左 ) 。 


本 条 件 柳 盖 了 条 件 2 中 国 的 圆心 坐标 在 扇形 内 的 情况 ， 并 且 还 考虑 到 了 圆 在 记 
形 内 且 扇形 的 弧 与 圆 有 交 缀 的 特殊 情况 。 除 此 以 外 的 情况 下 扇形 的 弧 与 圆 也 有 
可 能 交 营 ， 请 参考 下 文中 的 条 件 3。 由 于 本 条 件 已 经 完全 覆盖 了 条 件 2， 因 此 条 
件 2 的 检测 可 以 省 略 。 
条 件 3. 扇形 的 两 个 向 量 所 构成 的 外 侧 边缘 线段 中 ， 只 要 其 中 任意 一 条 与 加 
有 交点 就 认为 磁 擅 (参考 图 3-4.4 右 ) 。 
本 条 件 补 充 了 条 件 2 中 壮 沁 的 部 分 ， 妈 条 件 2 以 外 的 扁 形 的 牟 与 圆 有 交 玖 的 所 
情况 。 
因为 当 圆 的 圆心 坐标 没有 在 扇形 的 两 个 向 量 之 间 时 ， 如 果 圆 与 扇形 仍然 有 交 
释 ， 则 说 明 扇形 边缘 的 线段 与 圆 必 有 一 个 交点 (或 者 也 可 以 说 贺 与 扇形 的 弧 的 
交点 不 可 能 有 两 个 ) 。 


图 3-4-4 ”扇形 与 圆 形 碰 擅 时 的 位 置 关系 (其 二 ) 


条 件 1、2'、3 中 ， 只 要 满足 任意 一 个 ， 都 可 以 认为 圆 形 与 硬 形 有 了 础 撞 ， 下 面 将 
按 程 序 的 顺序 逐条 说 明 检 测 是 如 何 进行 的 。 


。 条 件 1. 扇形 圆心 在 圆 形 内 部 


条 件 1 是 书 形 圆心 在 圆 形 内 部 时 ， 两 图 形 碰 撞 。 令 圆 的 圆心 坐标 为 (xc ,yc 
)、 圆 的 半径 为 、 刷 形 的 圆心 坐标 为 (xp , yp )， 根 据 勾 股 定理 ， 有 以 下 关 
系 成 这 。 


J 


(zc — ZE) + (ye — yr)?lt:r2, 


将 其 程序 化 ， 对 应 CheckHit 函数 中 的 以 下 部 分 。 


dx = pcrCircle->x - pfaFan->x; dy = pcrCircle->y - pfaFan- 


fDistSqr = dx * dx + dy * dy; 

If ( fDistSqr < pcrCircle->r * pcrCircle->r ) { 
nResult = true; 

} 


对 于 条 件 1， 应 该 不 需要 特别 说 明 。 
。 条 件 2' . 圆 的 圆心 坐标 在 扇形 的 向 量 之 间 
接 下 来 是 条 件 2': 圆 形 的 圆心 坐标 在 组 成 局 形 的 两 个 向 量 之 间 ， 并 且 圆 形 


的 圆心 坐标 到 扇形 的 圆心 坐标 的 距离 ， 小 于 “ 圆 形 半径 + 扇形 半径 ?时 ， 认 
为 两 图 形 碰撞 。 令 书 形 的 两 个 向 量 分 别 为 v1、v，， 图 的 圆心 坐标 为 (xc ， 


yc) 〈 这 个 圆心 坐标 的 位 置 向 量 表示 为 C ) ， 那 么 圆 的 圆心 在 v1、v ,之 间 
这 个 条 件 可 以 表示 为 


C-F=am+p a>08B>0 


上 式 中 的 下 是 扇形 的 圆心 坐标 (xpr ,yr ) 的 位 置 向 量 。 看 到 上 面 的 等 式 ， 会 
很 自然 地 联想 到 向 量 的 定 比分 公式 ， 因 为 定 比 分 中 的 内 分 公式 ， 正 是 用 于 
计算 向 量 a 与 向 量 b 之 间 比 例 为 1:1-t 的 位 置 向 量 的 公式 ， 假设 内 分 点 的 位 
置 向 量 为 p ， 则 有 

p=(1-t)attb (0<t<1) 

而 用 a 表示 (1-t)， 用 6 表示 +t， 公式 就 可 以 转换 为 

p=aa+Bb (wa>0 且 8>0 且 w+pB=DT) 


当 a 与 8 满足 上 面 的 条 件 时 ， 向 量 p 就 是 向 量 a 与 向 量 b 的 内 分 点 。 当 a 
地 不 等 于 1， 而 是 等 于 常数 d 时 ， 等 式 可 变形 为 


P=aa+t+3b 


= dlaa+t+23b) 


其 中 a'+p'=1， 向 量 a'q +B'%b 表示 向 量 a 与 向 量 b 的 内 分 点 。 此 时 原 向 量 p 
了 驳 等 于 这 个 内 分 点 乘 以 稼 数 d ， 那 么 如 条 在 dg > 0 的 范围 内 移动 d ， 同 量 p 
下 ` 通过 内 分 点 的 射线 上 的 点 (参考 图 
3-4-5) 。 


图 3-4-5 ”通过 内 分 点 的 射线 


对 a 与 8 进行 各 种 取 值 (在 正 数 范围 内 ) ， 这 条 射线 能 通过 的 所 有 范围 正 
是 癌 量 a 与 向 量 b 之 间 的 区 域 。 而 由 于 a>0 且 B>0 时 a+B>0,， 且 C-F 是 
一 条 由 扇形 圆心 指向 圆 形 圆心 的 向 量 ， 因 此 “C -F=av ; +pBv1 时 «a>0 且 B 
>0” 是 C 在 问 量 a 与 癌 量 b 之 间 的 条 件 (参考 图 3-4-6) 


图 3-4-6 ”向 量 a 与 向 量 5 之 间 的 范围 


上 面 的 说 明 可 能 有 些 长 ， 不 知道 读者 朋友 是 否 都 已 经 明日 了 。 将 上 面 的 过 


程 代码 化 ， 就 得 到 了 CheckHit 函数 的 如 下 部 分 。 


068 | 
pfaFan->vy1; 
069 | 
fDelta; 

070 | 


fDelta = pfaFan->vx1 * pfaFan->vy2 - pfaFan->VX2 * 

fAlpha = ( dx * pfaFan->vy2 - dy * pfaFan->vx2 ) / 

fBeta = ( -dx * pfaFan->Vvy1 + dy * pfaFan->vx1 ) / 

if ( ( fAlpha >= 0.0f ) && ( fBeta >= 0.0f ) ) { 
ar = pfaFan->r + pcrCircle->r; 


if ( fDistSqr <= ar * ar ) { 
nResult = true; 


在 这 部 分 代码 中 ， 首 先 计算 等 式 


C—F = QU] 十 了 Wo 


中 的 a 与 6。 者 C=(xc,yc)、F=(xp,yF)、 V1=(V xs V1y) V2=(V ax,v 
,,)， 上 式 就 可 以 表示 为 


(00) -=a (ve) +a (ee) 
这 个 等 式 是 将 方程 组 
| za — ITF 一 aulz 十 Booz 

yc — YF 三 GUly 十 Buoy 
使 用 列 向 量 表示 得 到 的 。 而 如 果 使 用 矩阵， 等 式 还 可 以 写成 
(el 


如 果 觉 得 上 式 不 好 理解 ， 可 以 自己 实际 计算 一 下 矩阵 的 乘法 ， 看 看 是 否 与 
前 式 的 方程 组 一 致 。 


Ra es ee 
I 什么 


一 】 
Ulr V2r Ulr V2r E 
Uly U2y Uly U2y 


单位 矩阵 会 被 消 挤 ， 因 此 左右 对 调 一 下 可 以 得 到 


= 
a _ /vr v2r TC 一 TF 
3 Uly VU2y VC — YF 


-1 
Ulr VU2r 
oe he | 是 2x2 矩阵 的 逆 和 矩阵 ， 所 以 用 矩阵 的 计算 公式 
Q b 1 d —b 
(: . =- 
简单 求解 可 有 


一 】 
Ulr U2r l U2y 一 V2r 
Uly VU2y UlzrUV2y 一 U2rUly \— Uly Ulzx 


ay l U2y  —U2z Te 一 IF 
了 UlrU2y 一 U2rDly \— Uly U1 VC — YF 


这 里 将 系数 的 分 母 v vy-v zev 1y 表示 为 A， 则 有 


ui l Ugy  —U2z TC 一 IF 
了 A —Uly Ulz VC — YF 


则 a 与 86 分别 为 
. {val ) [ )} 
QO = CO—1vlTo — TF) Oo VorlYoe — YF) 
A 2y\*t 下 27\ 2 VF 
3 | ) [ )} 
= CO—1—ViylTo — TF)+ Vzrlyc — YF 
A ly\Ce F lr \VC JF 


这 对 应 CheckHit 函数 中 的 如 下 部 分 。 


068 | fDelta = pfaFan->vx1 * pfaFan->vy2 - pfaFan->VX2 * 
pfaFan->vy1; 

069 | fAlpha = ( dx * pfaFan->vy2 - dy * pfaFan->vx2 ) / 
fDelta; 

070 | fBeta = ( -dx * pfaFan->vyli + dy * pfaFan->vx1 ) / 
fDelta; 


这 部 分 处 理 的 是 “条 件 2' . 圆 形 的 圆心 坐标 在 组 成 而 形 的 两 个 向 量 之 间 ， 并 
生硬 形 的 国 心 全 村 到 局 形 的 回忆 坐 标的 距离 ， 小 于 “ 国 形 半 公 + 遍 形 六 
径 ” 时 ， 认 为 两 图 形 磁 撞 ”。 由 于 圆 形 的 圆心 坐标 在 鹿 形 的 两 个 向 量 之 间 的 
附加 条 件 是 a >0 且 b> 0， 并 且 还 需要 检查 圆 形 的 圆心 坐标 到 扇形 的 
标的 距离 ， 因 此 程序 中 通过 以 下 部 分 


画 
[之 
Da 


if ( ( fAlpha >= 0.0f ) && ( fBeta >= 0.0f ) ) { 
ar = pfaFan->r + pcrCircle->r; 
if ( fDistSqr <= ar * ar ) { 
nResult = true; 


进行 了 检查 ， 请 注意 其 中 变量 fDistSqr 的 值 在 处 理 条 件 1 时 ， 已 经 被 设置 
为 了 圆 的 圆心 坐标 到 肩 形 的 圆心 坐标 的 距离 的 平方 。 


另外 ， 从 一 点 是否 在 两 问 量 之 间 的 检测 以 及 A、aw、 有 的 算式 中 ， 可 能 已 经 
有 人 注意 到 了 ， 这 其 实 就 等 同 于 计算 两 向 量 的 外 积 。 检 测 一 点 是 否 在 两 向 
量 之 间 ， 稍 加 注意 的 话 征 完 全 可 以 通过 外 积 的 方法 进行 检测 的 ， 并 且 算 式 

会 更 加 简单 ， 但 是 一 般 来 说 ， 通 过 方程 组 求解 的 检测 方式 ， 可 以 适用 
于 更 多 的 情况 ， 因 此 这 里 采用 了 方程 组 求解 的 方式 。 


条 件 3. 扇形 的 两 个 向 量 构成 的 线段 中 任意 一 条 与 圆 有 交点 时 


至 此 虽然 已 经 做 了 很 长 的 讲解 ， 不 过 我 们 还 剩 下 最 后 一 个 条 件 没有 说 明 ， 
只 要 其 中 任意 一 条 与 
圆 有 交点 就 认为 碰撞 ” 个 条 件 涉及 了 圆 与 线段 的 交点 判断 。 请 注意 这 不 
是 圆 与 直线 的 交点 判断 。 如 打 是 判断 图 与 下 绥 只 要 联 立 圆 的 方程 式 与 直 
线 的 方程 式 得 到 二 元 方程 组 ， 然 后 求解 得 到 交点 的 判别 式 D ， 并 看 DD 的 符 
号 就 可 以 知道 是 否 相交 。 而 这 里 与 直线 不 同 的 是 ， 线 段 有 两 个 端点 ， 因 此 
判断 线段 与 圆 是 否 相 交 需 要 更 加 注意 。 


下 面 党 试 计算 一 下 圆心 坐标 为 C (xc ,yc)、 半径 为 产 的 圆 ， 与 起 点 为 下 (xr ， 
yF)` 终点 为 Ft+v1 的 线段 的 交点 。 首 先 ， 圆心 坐标 为 C (xc ,yc )、 半径 为 
rc 的 圆 的 方程 式 为 


(z— zo + (y— yo = 

使 用 向 量 将 起 点 为 F(xp ,yp )、 终 点 为 F+vj 的 线段 表示 为 
P=vit+F (0<t<1) 

可 将 其 分 解 为 

En (0 <t< 1 

y= viyt + YF 


然后 将 线段 等 式 代 入 圆 的 方程 式 ， 可 以 得 到 


(Vist + TF— re) + (vytt+yr—yc) =72 


接 下 来 有 点 索 琐 ， 我 们 要 将 括号 的 平方 部 分 展开 


vit +2(TF—Tovrti+ (TF—Io )2 十 vtyt +2 yF—Yyc)vwyt+(yr—yc) = re 
合并 整理 一 下 有 相同 次 数 的 ! ， 并 令 等 式 右边 为 零 ， 有 


| 1 十 1 )j 刀 二 2{(zF 一 zc)ulz 十 FF 一 ycjuly 片上 rzF 一 ZTC )2 二 (OF 一 ye) 一 7 一 
0 


求解 上 式 可 以 参考 二 次 方程 


aT?: +2br+c=0 


的 解 
一 上 b 土 vb’ 一 ac 
工 一 
a 
将 要 求 的 变量 改 为 t+， 这 时 上 式 中 的 各 系数 分 别 为 
y 1 可 
a = viz + vly 
b=—{(ro— Tr) + (Ye — YF )uly} 


f ) 1 ,9 4 
C 一 (ze 一 ITF 广 十 | yc — YF) —Tc 


而 在 程序 中 ， 将 xp -xc ) 置换 为 了 -(xc -xp )， 因 为 通过 这 个 小 技巧 ， 可 以 重 


复 利 用 上 面 程 / 


矛 中 已 经 计算 出 来 的 xc -x )。 


最 后 将 其 代入 上 面 求解 的 公式 ， 就 得 到 了 CheckHit 函数 中 的 如 下 部 分 。 
078 | a = pfaFan->vx1 * pfaFan->vx1 + pfaFan->vy1 * 
pfaFan->vy1; 

079 | b= -( pfaFan->vx1 * dx + pfaFan->vy1 * dy ); 
080 | c= dx * dx + dy * dy - pcrCircle->r * pcrCircle->r; 
081 | d=b*b-a*c; 

082 | if (d >= 0.0f ) { 

083 | t=( -b - sqrtf(d ) )/a; 

084 | if ( ( t >= 0.0f ) && ( t <= 1.0f ) ) { 

085 | nResult = true,; 

086 | } 

087 | } 

其 中 


这 


的 判别 式 D ， 也 就 是 解 的 公式 中 根 号 (Vv ”) 内 的 部 分 。 当 判别 式 为 负 


行 计算 了 变量 4， 并 检测 了 d 的 符号 。 这 里 的 变量 d 其 实 就 是 二 次 方程 


时 ， 不 单 是 线段 ， 包 含 线段 的 整 条 直线 与 圆 都 没有 交点 ， 因 此 需要 注意 将 
负 值 的 条 件 分 文 排除 在 外 ， 不 作为 交点 的 判断 条 件 。 


当 判 别 式 大 于 0 时 ， 需 要 计算 交点 所 对 应 的 t， 当 t 在 范围 0<t<1 内 时 ， 


线段 与 圆 有 交点 。 但 在 程序 中 ， 对 于 公式 求 得 的 两 个 解 ， 


个 进行 了 范围 检测 。 具 体 来 说 就 是 正 负 号 的 部 分 取 负 得 到 的 


_ —b— Vac 
这 个 解 。 程 序 中 只 检测 了 该 解 的 取 值 范 
正 负 号 中 取 负 的 解 是 两 个 解 中 较 小 的 


围 ， 


一 个 。 


数 必定 大 于 零 ， 那 么 减 去 这 样 一 个 正 数 肯定 


这 里 只 对 其 中 一 


这 在 为 什么 呢 ? 其实 这 是 由 于 


之 所 以 只 对 较 小 的 解 进行 检测 ， 是 基于 以 下 原因 。 当 


因为 在 实数 施 围 内 开 根 号 后 的 
要 比 加 上 这 个 正 数 的 解 要 小 。 


线段 与 融 有 交点 时 ， 


有 3 种 可 能 : JW) 仅 较 大 的 解 与 线段 有 交点 ;人 O 仅 较 小 的 解 与 线段 有 交点 ; 


(3 两 个 解 都 与 线段 有 交点 。 但 是 仅 有 较 大 的 解 与 线段 有 交点 时 ， 
心 必 定 在 圆 内 (参考 图 3-4-3 左 ) 。 而 这 种 情况 已 经 在 _ 


行 过 判断 ， 既 然 程序 已 经 运行 到 了 此 处 ， 


整 


仿 济 较 小 的 解 束 可 以 了 (参考 图 3-4-4) 。 


人 负 和 号 中 取 负 的 解 进行 了 检查 。 


经 过 了 相当 长 的 讲解 ， 总 算 把 圆 形 与 司 形 的 碰撞 检测 介 


下 来 还 对 局 形 的 向 量 v , 所 代表 的 线段 与 圆 是 
量 v1 与 圆 的 相交 检测 是 一 样 的 ， 这 里 就 不 再 费 述 了 。 


在 上 述 的 圆 形 与 扇形 的 碰撞 检测 中 ， 


一 方面 


证 形 的 加 
文中 的 条件 工 中 进 


说 明 局 形 的 圆心 是 不 可 能 在 圆 
内 的 ， 也 就 是 说 这 时 不 可 能 仅 有 较 大 的 解 与 线段 有 交点 ， 因 此 我 们 只 需要 


这 就 是 为 什么 此 处 的 程序 只 


为 了 易于 理解 ， 另 一 方 并 


(对 正 


绍 完 了 。 程 序 中 接 
否 相 交 进 行 了 检测 ， 原 理 与 向 


机 也 想 


让 本 书 涉 及 更 多 的 数学 话题 ， 程序 中 有 急 地 六 在 速度 及 鸡 案 上 做 了 
妥协。 比如 在 实际 项 目 中 ， 大 多 数 情况 下 都 会 优先 检测 两 物体 绝对 不 可 能 

碰撞 的 条 件 ， 即 对 圆 的 圆心 坐标 与 忆 形 的 圆心 坐标 的 距离 是 否 ;大 于 < 圆 的 半 
径 + 刷 形 的 半径 ”进行 检测 ， 并 将 不 可 能 碰撞 的 情况 排除 。 比 如 在 挥动 剑 时 
忠 可 以 使 用 这 种 检测 方式 ， ee 
之 外 的 。 这 种 情况 下 程序 要 如 何 编 写 ， 读 者 们 可 以 自己 尝试 着 实现 


3.5 [ 进 阶 ] 3D 的 碰撞 检测 


ken Word 
2D、3D、 维 度 扩 展 


定 的 


RANK/very hard 


下 。 


A PD 
Py 
OD 
Lhhd4 
》 \@ MW isdd) 


本 章 所 介绍 的 碰撞 检测 都 是 基 于 2D 的 ， 这 是 为 了 让 读者 先 掌握 碰撞 检测 的 基 
础 ， 因 此 刻意 回避 了 一 些 复杂 的 算法 ， 并 且 优先 了 程序 的 易 读 性 。 而 在 本 章 的 
最 后 部 分 ， 就 让 我 们 一 起 来 了 解 一 下 基于 3D 的 碰 擅 检测 的 基本 知识 吧 。 


本 小 节 将 简单 说 明 相 对 于 2D 的 碰撞 检测 ，3D 碰撞 检测 究竟 有 多 复杂 。 由 于 3D 
磁 撞 检测 相对 于 2D 来 说 增加 了 一 个 维度 ， 即 表示 坐标 的 变量 从 二 维 的 (x ,y )， 
f 寺 罚 。 


比如 ， 将 我 们 在 3.1 节 介 绍 的 与 坐标 轴 平 行 的 长 方形 物体 间 的 碰撞 检测 ， 扩 展 为 
与 坐标 轴 平 行 的 长 方 体 物体 间 的 碰撞 检测 ， 此 时 虽然 从 2D 扩展 为 了 3D， 但 是 
复杂 度 其 实 并 没有 增加 很 多 。 实 际 来 试 试 吧 。 首 先 ， 如 果 基 于 2D 的 与 坐标 轴 乎 
网 


Ww1 十 102 


了 1 一 To| < 5 


及 1 ho 
-wl < 


则 可 认为 两 物体 碰撞。 此 处 的 (x 1 ,y1) 与 (x,,y，, ) 分 别 代表 长 方形 1 与 长 方形 
2 的 中 心 坐标 ，w ] 与 w ,分别 代表 长 方形 1 与 长 方形 2 的 长 度 ，P 1 与 h ,分 别 
代表 长 方形 1 与 长 方形 2 的 宽度 (参考 图 3-5-1) 。 


图 3-5-1 要 检测 的 物体 为 长 方形 
将 其 扩展 到 3D 的 话 ， 则 当 


Ww1 十 102 
2 


|zl — Tol| < 


hi 十 h» 
yo 过 - 
(Vi — yl = 5 


dl 十 ao 


一 各 | 之 


都 满足 时 ， 则 两 物体 碰撞 。 此 处 (ki ,yi ,zi) 与 (xk，,y，,z2) 分 别 代 表 长 方 体 1 
与 长 方 体 2 的 中 心 坐 标 ，d 1 与 qd ,分别 代表 长 方 体 1 与 长 方 体 2 的 高 度 ， 与 2D 
相 比 ， 仅 附加 了 z 坐标 的 判断 条 件 ， 等 式 的 复杂 程度 就 变 为 了 原来 的 1.5 倍 (与 
维度 数 相 比 ) 。 


男 一 个 类 似 的 例子 是 3.2 节 介 绍 的 圆 形 的 碰撞 检测 ， 如 果 将 其 简单 地 扩展 为 3D 
的 话 ， 就 变 成 了 球体 之 间 的 碰撞 检测 。 也 来 实际 尝试 一 下 吧 。 首 先 ， 当 满足 


(zi — 7 + (Noy) < (r+ roa) 
时 ， 则 认为 两 圆 形 物 体 人 碰撞 。 其 中 (xj ,y1 ) 与 (x,,y， ) 分 别 代 表 圆 1 与 圆 2 的 


圆心 坐标 ,r | 和 7 ,分 别 代表 圆 1 与 圆 2 的 半径 。 将 其 扩展 到 球体 间 的 碰撞 检 
测 ， 则 十 当 满足 


1 了 | 了 3 nk 7 
【ZT1 一 T2)” 十 (VY1 一 Y2)” 十 {z21 一 Zo)” < {7T1 十 ro)” 


时 ， 两 球体 碰撞 。 这 里 的 (x1,y1,2z1) 与 (X2,y2,z2) 分 别 代 表 球体 1 与 球体 2 
0 "这 个 例子 与 2D 的 情况 相 比 ， 只 是 附加 了 z 项 ， 等 式 的 复杂 度 没 有 
le 


通过 - 面 两 个 例子 ， 大 家 可 能 会 认为 即使 磁 接 检测 变 为 3D， 其 复杂 程度 也 没有 
增加 很 多 。 但 5 因为 根据 物体 运动 所 要 求 的 自由 度 、 物 
体形 状 的 变化 ， 以 及 要 处 理 的 变量 增多 时 所 造成 的 等 式 的 复 洒 化 等 ，3D 碰撞 检 
测 的 复杂 程度 是 会 变化 的 。 


比如 对 正方 形 物体 的 碰撞 检测 ， 在 大 多 数 情 况 下 ，2D 中 只 需要 考虑 各 边 与 x、y 
轴 平 行 的 情况 ，3D 中 只 需要 考虑 立方 体 各 面 与 x、y“、z 轴 平 行 的 情况 〈 即 上 文 
中 刚刚 讲 过 的 情况 ) 。 因 为 在 2D 中 ， 角 色 本 身 需 施 转 的 情况 并 不 多 见 ， 而 在 
3D 中 大 多 数 情况 下 角色 本 身 或 者 角色 的 构成 部 件 都 会 转动 。 另 外 当 立方 体 各 1 
与 轴 都 不 平行 时 ， 其 碰撞 检测 会 变 得 复杂 很 多 (其 实 即 便 是 2D 的 长 方形 ， 在 旋 
转 时 进行 碰撞 检测 也 是 很 麻烦 的 ) 。 


在 上 面 的 圆 形 与 球体 的 例子 中 ， 我 们 将 2D 的 圆 形 扩展 为 了 3D 的 球体 ， 而 换 一 
种 思考 方式 ， 由 圆 形 扩 展 为 圆柱 体 或 圆锥 体 都 是 完全 有 可 能 的 。 例 如 当 圆 形 扩 
展 为 圆柱 体 时 ， 圆 柱 体 之 间 的 碰撞 检测 就 要 比 球体 之 间 的 磁 撞 检测 的 计算 复杂 


男 久 


趟 可 下 


得 多 。 
另外， 当 20 的 直线 扩展 到 3D 时 ， 由 于 本 来 是 从 祭 室 间 低 一 个 维度 > 可 以 用 一 
次 方程 表示 的 图 形 ， 因 此 一 般 就 会 将 直线 扩展 为 平面 。 在 2D 中 ， 一 条 通过 任意 


个 点 的 直线 ， 只 需要 两 个 点 践 可 以 确定 ， 而 在 3D 中 ， 于 任意 个 点 的 时 
面 ， 则 必须 有 三 个 点 才能 确定 。 这 就 好 比 想 要 稳定 地 架 起 一 根 答 子 ， 只 需要 在 

筷子 下 放 两 个 文 点 就 可 以 了 ， 而 想 要 架 起 一 个 杯 垫 ， 就 必须 在 垫子 下 面 放 至 少 
三 不 支点 。 由 两 点 决定 的 直线 ， 只 需要 联 立 有 两 个 未 知 数 的 二 元 方程 就 可 以 求 


解 ， 通 过 矩阵 求解 也 只 需要 计算 一 个 2x2 矩阵 的 道 矩 阵 ， 复 杂 度 与 方程 组 一 
样 。 而 对 于 一 个 由 三 个 点 才能 确定 的 平面 来 说 ， 就 需要 求解 有 三 个 未 知 数 的 三 
元 联合 方程 ， 或 者 计算 有 着 同样 复杂 度 的 3x3 矩阵 的 逆 和 矩阵 。 众 所 周知 ， 求 2x2 
矩阵 的 逆 和 矩阵 是 比较 简单 的 ， 而 求解 3x3 和 矩 阵 的 逆 短 阵 就 要 复杂 得 多 了 因此 
程序 中 一 般 不 会 采用 三 元 联合 方程 的 形式 来 计算 由 三 个 点 确定 的 平面 ， 而 是 将 
SN 个 点 加 两 个 向 量 ， 通 过 计算 通过 一 个 点 且 与 两 个 向 量 平 行 的 平 
面 来 求解 。 


想必 上 面 的 例子 已 经 可 以 说 明 ， 仅 仅 将 2D 中 的 解法 简单 地 扩展 到 3D， 反 而 会 
让 问题 变 得 复 洒 ， 因 此 针对 3D 往往 采用 3D 特有 的 解法 来 处 理 问题 。 这 也 是 相 
比 2D 来 说 3D 的 磁 撞 检测 更 加 复杂 的 原因 。 此 外 ， 如 有 果 想 加 别人 讲解 碰撞 检测 
的 数学 知识 ， 或 者 想 上 自学 新 的 磁 撞 检测 ，2D 的 情况 下 只 要 在 纸 上 画 出 图 形 就 可 
以 进行 说 明 ， 而 如 条 是 3D， 想 要 在 纸 上 清楚 地 表示 3D 空间 则 基本 不 太 可 能 ， 
因此 无 论 是 从 说 明 还 是 从 学 习 的 角度 来 讲 ，3D 的 情况 都 更 加 困难 。 


可 想 而 知 ， 在 游戏 开发 中 ， 从 2D 过 渡 到 3D 时 ， 磁 接 检 测 所 需要 的 数学 公式 及 
算法 会 更 加 复杂 ， 并 且 不 容易 理解 ， 这 就 造成 了 3D 开发 的 门槛 较 高 。 不 过 门槛 
高 也 有 好 处 ， 就 是 能 从 事 这 类 开发 的 人 才 比 较 稀 缺 。 本 书 中 并 没有 涉及 3D 的 碰 
撞 检 测 ， 如 果 读 者 立志 要 成 为 游戏 开发 者 ， 并 且 布 望 有 较 高 身价 的 话 ， 不 妨 以 
本 书 的 2D 碰撞 检测 为 基础 去 挑战 更 难 的 3D 碰撞 检测 吧 。 


第 4 章 光线 的 制作 


4.1 ”让 物体 向 任意 方向 旋转 〈 含 缩放 效果 ) 
4.2 ”任意 两 点 间 的 光线 投射 

4.3 ”光线 弯曲 处 理 

4.4 ”实现 带 奶 踪 效 果 的 激光 

4.5 [ 进 阶 ] 绘制 大 幅度 弯曲 的 曲线 时 的 难点 


4.1 让 物体 向 任意 方向 旋转 〈 含 缩放 效果 ) 


Ken Word 
0 旋转 、 基 向 量 、 向 量 加 法 、 向 量 减 法 RANK/normal 


在 第 1 章 中 ， 我 们 已 经 介绍 了 能 改变 角色 等 物体 位 置 的 < 运动 ”。 从 本 章 开 始 ， 
。 首 先 来 看 以 物 体 目 身 的 一 点 为 中 心 旋 


本 小 节 将 介绍 如 何 让 物体 旋转 并 朝向 指定 的 方向 。 假 设 有 一 张 光 线 的 图 片 素 
材 ， 通 过 本 小 节 的 学 习 就 可 以 实现 将 光线 投射 到 某 个 特定 的 方向 。 而 为 了 让 数 
学 部 分 更 加 简单 ， 我 们 只 考虑 物体 在 原点 O 时 的 旋转 。 


图 4-1-1 通过 物体 旋转 实现 的 光线 显示 的 程序 
提 到 物体 的 旋转 ， 具 备 一 定 程 度 的 数学 知识 的 朋友 


能 首先 都 会 想 : 使 用 旋转 


和 矩阵 不 就 可 以 实现 了 吗 ? 的 确 ， 这 转 先 孟 是 游戏 中 常用 的 方法 在 物体 面向 的 


角度 确定 时 非常 有 效 。 然 而 目前 我 们 是 想 通 过 倾斜 一 张 光线 素材 图 片 来 实现 光 


线 的 投射 ， 此 时 旋转 矩阵 就 不 太 适 用 了 。 因 为 游戏 中 在 投射 光线 等 物体 时 ， 其 


投射 方向 的 角度 往往 是 未 知 的 ， 一 般 只 能 知道 光线 的 起 点 及 终点 ， 这 在 3D 游戏 


中 岂 为 多 见 
在 光线 的 起 点 及 终点 部 确定 的 情况 下 ， 如 果 采 用 旋转 入 


下 阵 来 倾斜 物体 ， 诈 先 融 


需要 连接 起 点 与 终点 得 到 一 条 直线 ， 然 后 求 得 这 条 直线 与 x 轴 的 夹 角 ， 通 过 夹 


角 就 可 以 得 到 一 个 旋转 矩阵 并 控制 物体 的 旋转 。 这 种 方法 确实 可 以 实现 让 物体 


朝向 指定 的 方向 ， 但 是 计算 过 程 中 会 存在 很 多 浪费 。 下 面 从 数学 角度 来 说 明 原 
因 。 通 过 倾斜 的 直线 先 求 得 角度 ， 再 通过 角度 确定 旋转 矩阵 并 控制 物体 旋转 这 
一 操作 ， 从 本 质 上 来 讲 等 于 将 普通 的 坐标 系 先 转换 到 包含 角度 的 特殊 坐标 系 

(例如 极 坐 标 这 种 坐标 系 ) ， 然 后 再 重新 转换 回 普 通 坐 标 系 。 然 而 如 果 只 是 为 


了 让 物体 旋转 ， 这 些 坐 标 系 间 的 转换 其 实 都 是 多 余 的 。 


而 且 从 工程 学 的 角度 来 


看 ， 求 直 线 与 x 轴 的 夹 角 会 用 到 反 三 角 画 数 (如 C 语言 中 的 atan2 等 ) ， 反 三 角 
画 数 的 计算 更 花 时 间 ， 应 该 尽量 避免 使 用 。 基 于 这 些 原因 ， 我 们 不 会 通过 旋转 


矩阵 (或 反 三 角 函 数 等 ) 的 方式 来 旋转 物体 。 


不 使 用 旋转 矩阵 ， 具 体 要 如 何 操作 呢 ? 我 们 会 用 到 基 变 换 这 一 方法 。 基 变换 就 
是 对 基 辐 量 进行 的 变换 ， 而 所 谓 基 风量 ， 就 是 决定 x 轴 、`》 轴 方 同 写 放大 比率 的 
向 量 。 比 如 在 普通 的 坐标 系 中 ，x 方向 的 基 同 量 为 i=(1, 0)，y 方 癌 的 基 回 量 为 7 
= (0, 1)。 将 这 两 个 基 向 量 组 合 ， 就 可 以 将 任意 坐标 (x ,y ) 表示 为 站 + 好 的 形式 。 
这 样 一 来 ， 即 使 不 更 改 x、y ， 而 只 是 将 i、j 旋转 指向 特定 的 方 同 ， 也 可 以 实 
现 物体 的 旋转 (参考 图 4-1-2) 。 


图 4-1-2 通过 i 与 j 来 实现 物体 的 旋转 


但 是 ， 如 果 保 持 i、j 的 位 置 关系 不 变 左 方 同 经 过 一 个 直角 的 位 

置 ) ， 物 体 是 无 法 进行 旋转 的 。 此 时 如 果 改 变 x、y ， 束 会 破坏 i 与 j 的 正 交 关 

0 (shear conversion) ， 看 起 来 有 点 像 压 扁 了 一 个 纸箱 
人 参 4-1-3) “。 


图 4-1-3 切 变 


这 里 ， 我 们 假设 基 向 量 i 指 向 任意 方向 ， 并 将 i 沿 顺 时 针 方 向 旋转 2 (90 度 ) 得 
到 了 。 而 在 上 例 中 ， 之 所 以 将 i 逆 时 针 旋 转 得 到 7， 是 因为 在 计算 机 中 ，y 轴 是 
指 同 下 方 的 。 

假设 这 样 得 到 的 一 对 新 的 基 向 量 为 站 与 站。 然后 进行 向 新 坐标 系 的 坐标 变换 ， 

坐标 为 x yy ) 的 点 PP， 即 P=xi +yj 这 个 后， 号 移动 到 了 后 P' =xi'+yj 。 可 将 其 
用 分 量 表示 为 


用 矩阵 可 表示 为 


也 就 是 说 ， 只 要 将 新 的 基 向 量 关 的 分 量 ele 就 可 以 得 到 从 一 
般 坐 标 系 到 新 坐标 系 的 变换 矩阵 。 这 是 一 个 非常 方便 的 数学 结论 ， 最 好 可 以 背 
下 来 (普通 的 旋转 矩阵 就 是 通过 这 种 方式 得 到 的 矩阵 的 一 个 特例 ) 。 


POINT 要 得 到 从 普通 坐标 系 到 新 坐标 系 的 变换 矩阵， 只 需要 将 新 的 基 向 
量 的 分 量 表示 为 矩阵 形式 就 可 以 了 。 


接 下 来 就 让 我 们 使 用 这 个 方便 的 窍 阵 ， 来 实际 将 物体 旋转 一 下 。 示 例 程序 
Ray_1_1.cpp 就 是 一 个 简单 的 旋转 物体 的 程序 。 以 激光 图 片 的 左上 角 为 原点 ， 使 
图 片 的 右上 角 跟 随 鼠 标 指针 旋转 以 让 整 张 图 片 转动 。 这 个 程序 不 仪 实现 了 物体 
的 旋转 ， 还 可 以 改变 物体 的 大 小 ， 即 具备 放大 缩小 功能 。 为 了 便于 说 明 ， 算 法 
做 了 一 定 的 简化 。 在 这 个 同时 具备 旋转 及 放大 缩小 功能 的 程序 Ray_1_1.cpp 中 ， 
ls 1 需要 看 最 重要 的 部 分 ， 即 MoveCharacter 函数 中 的 以 下 部 分 (代码 清单 4- 
1-1) 。 


代码 清单 4-1-1 具备 旋转 及 放大 缩小 功能 的 MoveCharacter 画 数 中 的 主要 部 分 
(Ray_1_1.cpp 代码 片 段 ) 


042 | v2Forward.x = ( float )CursorPos.x; 

043 | v2Forward.y = ( float )CursorPos.y; 

044 | v2Side.x = -v2Forward.y; 

045 | v2Side.y = v2Forward.x; 

046 | 

047 | v2Pos1.x = 0.0f' v2Posi.y = 0.0Of,; 

048 | V2Pos2.x = ( float )CursorPos.x; v2Pos2.y = ( float 
)CursorPos.y; 

049 | V2Pos3.X = + V2Side.x; v2Pos3.y = 后 
v2Side.y 

050 | V2Pos4.x = CursorPos.x + v2Side.x; V2Pos4.y = CursorPos.y + 
v2Side.y 


其 中 v2Forward 是 一 个 代表 2D 癌 量 的 结构 体 ， 包 含 了 原点 到 鼠标 指针 的 向 量 ， 
即 上 文中 新 的 基 向 量 i" 。v2Side 结构 体 中 包含 了 新 的 基 向 量 产 ， 程序 中 的 


v2Side.x = -v2Forward.y; 
v2Side.y = v2Forward.x; 


这 两 行将 基 同 量 六 的 x 分 量 与 y 分 量 进行 了 互 换 ， 并 将 x 分 量 ( 原 六 的 y 分 
量 ) 取 负 ， 得 到 了 产 。 为 什么 要 这 样 变换 呢 ? 因为 产 是 将 立 顺 时 针 旋转 2 (90 


度 ) 得 到 的 ， 此 时 与 郑 的 位 置 关系 应 当 为 正 交 ， 而 上 式 代 表 的 就 是 正 交 的 旋 
转变 换 结果 。 下 面 就 来 验证 一 下 吧 ! 将 向 量 旋转 2 (90 度 ) 的 矩阵 可 变换 为 


cos3 —sin3 _ /0 -1 
sin3 Cos 也 ~ \l1 0 


使 用 这 个 矩阵 ， 假 设 将 站 旋转 3 (90 度 ) 得 到 六 ， 就 有 如 下 关系 成 立 。 


这 与 程序 中 的 下 列 语 名 一致。 


v2Side.x = -v2Forward.y; 
v2Side.y = v2Forward.x; 


请 注意 在 一 般 的 教科 书 中 ， 坐 标 系 都 以 y 轴 上 方 为 正 ， 施 续 了 是 沿 逆 时 针 方 向 
的 。 而 在 计算 机 中 ， 坐 标 系 以 轴 下 方 为 正 ， 因 此 是 顺 时 针 旋转 2 。 


POINT ”计算 机 中 的 坐标 系 以 y 轴 下 方 为 正 ， 因 此 需要 注意 旋转 方向 与 通 
党 情况 是 相反 的 。 

。 对 四 边 形 的 四 个 角 的 坐标 进行 变换 

既然 已 经 得 到 了 丫 与 产 这 两 个 基 向 量 ， 接 下 来 就 让 我 们 使 用 它们 对 四 边 形 


的 四 个 角 的 坐标 进行 变换 。 假 设 上 例 中 变换 前 的 四 个 角 分 别 为 ， 左上 和 角 (0， 
0)、 右 上 和 角 (1,0)、 左 下 角 (0,1)、 右 下 角 (1,1) (参考 图 4-1-4) 。 


(0, 0 ) ( 工 0 


(11) (1 
图 4-1-4” ”四边形 的 四 个 角 的 坐标 
如 果 按 照 这 个 坐标 直接 绘制 的 话 ， 只 能 得 到 一 个 几乎 看 不 到 的 1 像素 大 小 


的 图 形 ， 将 其 从 原点 拉 伸 至 妃 标 指针 的 位 置 ， 才 能 得 到 一 个 正常 的 四 边 
形 。 此 时 使 用 上 例 的 矩阵 


"f "fl 
lr Jr 
~/ f 
ly Jy 


对 四 边 形 的 四 个 角 进 行 变换 ， 让 我 们 来 看 看 会 得 到 什么 结果 。 


在 示例 程序 Ray_1_1.cpp 中 ， 上 面 的 变换 体现 为 


047 | v2Pos1.x = 0.0f,; v2Posi.y = 0.0f， 

048 | v2Pos2.x = ( float )CursorPos.x; v2Pos2.y = ( float ) 
CursorPos.y; 

049 | V2Pos3.Xx = + V2Side.x; v2Pos3.y = + 
v2Side.y; 

050 | V2Pos4.x = CursorPos.x + v2Side.x; v2Pos4.y = CursorPos.y + 
v2Side.y; 


其 中 v2Pos1、v2Pos2、v2Pos3、v2Pos4 分 别 代表 图 形 的 左上 角 、 右 上 角 、 


左下 角 、 右 下 角 的 坐标 。 可 以 看 到 ， 当 程序 中 的 基 向 量 疡 为 v2Forward 
(= Cee ， 基 向 量 产 为 v2Side 时 ， 和 矩阵 计算 的 结果 与 程序 计算 的 结 
果 是 一 致 的 。 其 实 上 面 的 算式 ， 除 了 可 以 看 作 是 通过 矩阵 进行 变换 外 ， 同 


时 也 是 用 向 量 F “中 及 其 加 法 运算 来 表示 疼 形 的 四 个 角 的 坐标 (参考 图 4- 
1-5) °。 


病 马 


i 


图 4-1-5 用 向 量 i"、 六 及 其 加 法 运算 来 表示 四 个 角 

以 任意 一 点 为 中 心 旋转 

接 下 来 我 们 尝试 不 以 图 形 的 四 个 角 中 的 一 点 为 原点 ， 而 以 任意 一 点 为 中 心 
进行 旋转 。 具 体 实现 请 参考 示例 程序 Ray_1_1a.cpp。 程序 中 的 重点 是 
MoveCharacter 画 数 中 的 以 下 部 分 (代码 清单 4-1-2) 。 


代码 清单 4-1-2 ”使 图 形 以 任意 一 点 为 中 心 旋转 的 MoveCharacter 函数 的 主 
要 部 分 (Ray_1_1a.cpp 代码 片段 ) 


044 | v2Forward.x = ( float )CursorPos.x - OriginPos.x; 

045 | v2Forward.y = ( float )CursorPos.y - OriginPpos.y; 

046 | v2Side.x = -v2Forward.y; 

047 | v2Side.y = v2Forward.x; 

048 | 

049 | v2Pos1.x = ( float )OriginPos.x; v2Posi.y = ( float 
)OriginPos.y; 

050 | V2Pos2.x = ( float )CursorPos.x; v2Pos2,.y = ( float 
)CursorPos.y; 

051 | V2Pos3.x = OriginPos.x + v2Side.x; v2Pos3.y = OriginPos.y + 
v2Side.y; 

052 | V2Pos4.x = CursorPos.x + v2Side.x; VvV2Pos4.y = CursorPos.y + 


v2Side.y; 


| 


下 面 让 我 们 与 前 文中 的 Ray_1_1.cpp 比较 着 来 看 。 首 先 ， 计 算 代表 癌 量 站 的 
V2Forward 时 ， 坐 标 之 间 变 成 了 减法 运算 。 其 中 CursorPos 代表 鼠标 指针 的 
位 置 ，OriginPos 则 代表 原 Ray_1_1.cpp 中 的 原点 ， 即 图 形 的 四 个 角 中 的 一 
个 角 的 坐标 。 这 两 个 坐标 之 间 进 行 减法 ， 等 同 于 向 量 之 间 进 行 减 法 ， 得 到 
的 是 从 坐标 OriginPos 指向 CursorPos 的 向 量 (参考 图 4-1-6) 。 


CursorPos-OriginPos ® CursorPos 


OriginPos 


0O 
图 4-1-6 通过 坐标 间 的 减法 得 到 坐标 间 的 向 量 


得 到 了 新 的 基 癌 量 丫 之后， 与 Ray_1_1.cpp 的 处 理 相同 ， 将 向 量 六 

(v2Forward) 沿 顺 时 针 方向 旋转 2 得 到 向 量 j (v2Side) 。 下 面 就 是 通过 
回 量 立 、 产 计算 图 形 的 四 个 角 的 坐标 ， 虽 然 此 处 也 可 以 通过 垂 阵 进 行 坐标 
变换 ， 但 是 使 用 向 量 的 加 法 运算 会 更 加 容易 理解 。 首 先 ， 令 图 形 左 上 和 角 为 
OriginPos 所 在 的 位 置 ， 右 上 角 为 CursorPos 所 在 的 位 置 。 那 么 左下 角 就 等 
于 OriginPos 所 在 的 位 置 加 上 向 量 j (v2Side) ， 右 下 角 残 等 于 CursorPos 
所 在 的 位 置 加 上 向 量 j (v2Side) 。 这 是 因为 向 量 产 代表 旋转 后 的 图 形 的 y 
坐标 ， 而 通过 将 左上 角 、 右 上 角 分 别 与 回 量 产 相 加 ， 束 可 以 求 得 图 形 下 端 
的 坐标 (参考 图 4-1-7) 。 


图 4-1-7 通过 与 向 量 jr 相 加 得 到 下 端的 坐标 


像 这 样 ， 我 们 就 实现 了 将 物体 治 某 个 癌 量 旋 转 ， 实 现 的 过 程 中 不 仅 没有 使 
用 正弦 余弦 三 角 函 数 ， 甚 至 连 反 三 角 函 数 都 完全 没有 用 到 。 这 对 减少 程序 
的 运算 量 是 非常 有 好 处 的 ， 竺 别 是 在 3D 场景 中 更 加 有 优势 ， 因 此 布 望 读 者 
能 牢记 这 些 方法 。 


4.2 任意 两 点 间 的 光线 投射 


Ken Word 
向 量 长 度 、 单 位 向 量 RANK/normal 


前 一 小 节 中 我 们 学 习 了 目标 物体 的 位 置 固定 时 的 旋转 。 本 小 节 将 讲解 目标 物体 
在 任意 位 置 时 如 何 实现 旋转 。 

作为 不 使 用 旋转 矩阵 或 三 角 函 数 等 的 物体 旋转 的 一 个 应 用 ， 本 小 市 将 竹 试 让 光 
线 在 任意 两 点 间 投 射 。 这 一 效果 的 实现 是 建立 在 4.1 节 的 内 容 的 基础 上 的 ， 因 此 
建议 读者 移 理 解 掌握 上 一 人 小节 的 内 容 。 


图 4-2-1 将 不 使 用 旋转 矩阵 或 三 角 画 数 等 的 旋转 应 用 于 光线 投射 的 程序 


在 真正 开始 执行 光线 投射 程序 之 前 ， 首 先 让 我 们 来 尝试 实现 一 个 光线 的 宽度 可 
以 根据 长 度 联动 变化 的 程序 ， 如 示例 程序 Ray_2_1.cpp 所 示 ， 程 序 中 的 重点 为 
MoveRay 函数 中 的 以 下 部 分 (代码 清单 4-2-1) 。 


代码 清单 4-2-1 ”光线 宽度 根据 长 度 联动 变化 的 MoveRay 画 数 的 主要 部 分 
(Ray_2_1l.cpp 片段 


045 | 

046 | v2Forward.y = ( float )( CursorPos.y - OriginpPos.y ); 

047 | v2Side.x -v2Forward.y / 2.0f; 
| 
| 


v2Forward.x = (float )( CursorPos.x - Originpos.x ); 


048 v2Side.y v2Forward.x / 2.0f; 

049 

050 | V2Pos1. OriginPos.x - v2Side.x; v2Posi.y = OriginPos. 
v2Side.,y; 

051 | V2Pos2 ， CursorPos.x - v2Side.x; v2Pos2.y = CursorPos. 
v2Side.y; 

052 | V2Pos3 ， OriginPos.x + v2Side.x; v2Pos3.y = OriginPos ， 
v2Side.,y; 

053 | V2Pos4， CursorPos.x + v2Side.x; v2Pos4.y = CursorPos. 
v2Side.,y; 


程序 中 首先 将 光线 从 起 点 指向 终点 的 向 量 放 入 v2Forward， 也 就 是 说 v2Forward 
与 光线 的 行进 方向 是 平行 的 。 接 下 来 ， 将 v2Forward 沿 顺 时 针 方 向 旋转 r90 
度 ) ， 半生 全 二 以 长 度 一 半 的 向 量 放 入 v2Side， 也 就 是 说 v2Side 与 光线 的 行进 
方向 垂直 。 最 后 ， 使 用 v2Side 向 量 ， 将 图 形 的 四 个 角 通过 以 下 方法 计算 出 来 
(参考 图 4-2-2) 。 

。 左 上 角 = 光线 的 起 点 - v2Side 

。 右上 角 = 光线 的 终点 - v2Side 

。 左 下 角 = 光线 的 起 点 + v2Side 


。 右 下 角 = 光线 的 终点 + v2Side 


一 29zde 
终点 
v2 S27de 


v2Forward 


—v2S2de 
起 点 


229zde 


图 4-2-2 ”通过 起 点 、 终 点 及 向 量 计 算 图 形 的 四 个 角 


由 于 v2Side 代表 的 是 长 度 为 光线 长 度 的 一 半 ， 并 上 且 与 光线 行进 方向 垂直 的 向 
量 ， 因 此 无 论 光线 向 任何 方向 投 尉 ， 都 可 以 通过 疝 量 的 加 减法 ， 得 到 如 图 4-2-2 
所 示 的 儿 点 ， 最 终 绘制 出 一 条 宽度 与 长 度 联 动 变化 的 光线 。 请 留意 我 们 解决 问 
题 的 核心 思路 是 : 要 使 光线 可 以 向 任意 方向 投射 ， 就 需要 对 光线 图 像 进 行 旋 


转 ， 而 对 光线 图 像 进行 旋转 ， 只 需 准 备 一 条 与 光线 行进 方向 垂直 的 向 量 ， 并 使 
用 向 量 间 的 加 减法 (不 需要 三 角 函 数 或 反 三 角 函 数 ) 计算 出 图 形 的 变化 即 可 。 
。 实现 固定 宽度 的 光线 


接 下 来 我 们 将 介绍 如 何 实现 固定 宽度 的 光线 。 示 例 程 序 Ray_2_1.cpp 中 所 演 
示 的 这 种 光线 ， 其 宽度 会 随 光 线 长 度 的 增加 而 增加 ， 这 在 现实 中 并 不 多 
见 。 现 实 中 比较 实用 的 是 宽度 固定 的 光线 ， 如 示例 程序 Ray_2_1a.cpp 所 
示 “。 


图 4-2-3 ”宽度 固定 的 光线 
该 程序 将 原 Ray_2_1.cpp 中 的 


047 | v2Side.x 
048 | v2Side.y 


-v2Forward.y / 2.0f; 
v2Forward.x / 2.0f; 


这 两 行进 行 了 更 改 ， 如 代码 清单 4-2-2 所 示 。 
代码 清单 4-2-2 ”固定 光线 的 宽度 (Ray_2_1a.cpp 片段 ) 


048 | fLength = sqrtf( v2Forward.x * v2Forward.x + v2Forward.y * 
v2Forward.y ); 

v2Forward.x /= fLength; v2Forward.y /= fLength; 

v2Side.x -v2Forward.y * RAY_WIDTH / 2.0f; 
v2Forward.x * RAY_WIDTH / 2.0f; 


v2Side.y 


为 了 理解 这 部 分 处 理 ， 首 先 需要 理解 在 上 文 的 Ray_2_1.cpp 中 ， 光 线 宽度 是 
如 何 跟 随 长 度 联动 变化 的 。 决 定 光 线 变 化 的 要 素 有 了 两 个 ， 与 光线 行进 方向 
平行 的 向 量 v2Forward 以 及 与 光 线 行进 方向 王 直 的 同 量 v2Side。 在 
Ray_2_1.cpp 中 ，v2Forward 是 光线 的 起 点 到 终点 的 向 量 ， 因 此 v2Forward 


理所当然 会 随 光线 的 长 度 变化 而 变化 ， 而 v2Side 则 是 将 Y2Forward 旋转 2 
并 将 长 度 变 为 一 半 后 得 到 的 ， 所 以 v2Side 向 量 的 长 度 也 是 动态 变化 的 。 另 
外 ， 由 于 v2Side 向 量 决定 着 光线 的 宽度 (参考 图 4-2-2) ， 因此 一 旦 v2Side 
回 量 的 长 度 发 生变 化 ， 光 线 的 宽度 也 会 随 之 变化 。 反 过 来 想 ， 为 了 让 光线 
的 宽度 固定 ， 其 实 只 需要 让 v2Side 向 量 的 长 度 国定 就 行 了 。v2Side 向 量 的 
长 度 之 所 以 会 变化 ， 是 因为 v2Forward 向 量 的 长 度 会 发 生变 化 ， 因 此 ， 为 
了 国定 v2Side 的 长 度 ， 我 们 有 下 面 两 个 选择 。 


1. 只 固定 v2Side 向 量 的 长 度 ， 不 国定 v2Forward 向 量 的 长 度 
2. 将 v2Side 向 量 及 v2Forward 向 量 的 长 度 都 固定 


示例 程序 Ray_2_1a.cpp 中 采用 了 方式 2， 将 两 个 向 量 的 长 度 都 国定 了 。 

样 正 好 可 以 对 应 与 光线 平行 及 垂直 的 一 对 向 量 。 为 此 Ray_2_1a.cpp 中 将 
光线 平行 的 v2Forward 向 量 作 为 了 单位 向 量 。 具 体 来 说 ， 就 是 根据 勾 股 定 
理 求 得 回 量 的 长 度 ， 然 后 将 v2Forward 的 x 分 量 、y 分量 分 别 除 
以 该 长 度 。 


048 | fLength = sqrtf( v2Forward.x * v2Forward.x + v2Forward.y * 
v2Forward.y ); 
049 


| v2Forward.x /= fLength; v2Forward.y /= fLength; 


这 样 得 到 的 v2Forward 向 量 ， 就 是 与 光线 长 度 (起 点 到 终点 间 的 距离 ) 无 
关 的 长 度 为 1 的 向 量 。 基 于 这 样 的 v2Forward 向 量 ， 并 对 v2Side 向 量 做 如 
下 计算 ， 最 终 就 可 以 得 到 宽度 为 RAY_WIDTH 的 光线 。 


v2Side.x -v2Forward.y * RAY WIDTH / 2.0f; 
v2Side.y v2Forward.x * RAY_WIDTH / 2.0f; 


即 代表 将 v2Forward 向 量 按 顺 时 针 方 向 旋转 2 ， 长 为 RAY_WIDTH 的 一 半 
的 向 量 。 将 v2Side 向 量 分 别 加 减 光线 的 起 点 、 终 点 坐标 ， 就 得 到 了 宽度 为 
RAY _WIDTH 的 光线 (参考 图 4-2-2) 。 


在 本 小 世 及 前 一 小 节 中 ， 为 了 实现 简单 的 光线 投射 ， 虽 然 必须 对 光线 的 图 
形 进 行 旋转 、 伸 缩 等 处 理 ， 但 我 们 尽量 避免 了 使 用 反 三 角 画 数 、 旋 转 算 
阵 、 放 大 缩小 矩阵 等 。 这 种 处 理 问 题 的 方式 ， 可 以 应 用 到 游戏 开发 的 很 多 
场景 中 ， 硕 望 读者 们 可 以 牢记 。 


4.3 ”光线 弯曲 处 理 


ken Word 


圆 形 、 圆周 长 、 伪 影 RANK/normal 


我 们 已 经 学 习 了 如 何 表 现 直 线形 的 光线 ， 接 下 来 就 要 考虑 弯曲 的 光线 的 情况 。 
在 本 小 节 ， 我 们 将 学 习 如 何 绘制 圆 形 的 光线 。 


普通 的 光线 都 是 笔直 投射 的 ， 而 本 小 节 中 我 们 将 学 习 如 何 制作 出 弯曲 的 光线 。 


图 4-3-1 实现 弯曲 的 光线 的 程序 


例如 ， 示 例 程序 Ray_3_1.cpp 就 绘制 出 了 圆 形 的 光线 。 该 圆 形 光线 以 画面 中 央 为 
中 心 ， 而 且 光 线 会 始终 穿 过 鼠标 指针 所 在 的 位 置 。 程 序 中 重要 的 部 分 是 
MoveRay 函数 中 的 以 下 代码 (代码 清单 4-3-1) 。 


4-3-1 绘制 圆 形 光线 的 MoveRay 画 数 的 主要 部 分 (Ray 3_1.cpp 片 


059 | nDivideNum = ( int )( ( 2.0f * PI *r )/ 10 ); 

060 | if ( nDivideNum > MAX_DIVIDE_ NUM ) nDivideNum = MAX_DIVIDE_NUM; 
061 | fAngleDiff = 2.0f * PI / nDivideNum; 

062 | ri=r - ( RAY WIDTH / 2.0f ); 

063 | r2= r+ ( RAY WIDTH / 2.0f ); 

064 | 

065 | fAngle1 = 0.0of; 

066 | fAngle2 = fAngleDiff; 

067 | for (i= 0; i < nDivideNum * 4; i += 4 ){ 

068 | v2Pos[i ].Xx= r2 * cosf( fAngle1 ) + CenterPos.x; 
069 | v2Pos[i ]:y = r2 * sinf( fAngle1 ) + CenterPos.y; 
070 | V2Pos[I + 1].x = r2 * cosf( fAngle2 ) + CenterPos.x; 
071 | v2Pos[i + 1].y = r2 * sinf( fAngle2 ) + CenterPos.y; 
072 | V2Pos[i + 2].x = ri * cosf( fAngle1 ) + CenterPos.x; 
073 | v2Pos[i + 2].y = ri * sinf( fAngle1 ) + CenterPos.y; 
074 | v2Pos[i + 3].x = ri * cosf( fAngle2 ) + CenterPos.x; 
075 | v2Pos[i + 3].y = ri * sinf( fAngle2 ) + CenterPos.y; 


076 | fAngle1 += fAngleDiff; 
077 | fAngle2 += fAngleDiff; 


程序 中 首先 确定 了 如 何 将 由 光线 构成 的 圆 形 (或 者 可 以 说 圆 环 ) 按 角度 方向 分 
割 ， 并 将 分 割 数 放 入 了 变量 nDivideNum 中 。 因 为 计算 机 一 般 都 不 支持 直接 绘制 


曲线 ， 只 能 上 自由 绘制 三 角 多 边 形 ， 因 此 将 光线 的 圆 环 按 角 度 方 向 分 割 为 者 干 个 
很 小 的 三 角 多 边 形 ， 束 可 以 通过 三 角 多 边 形 最 终 绘制 出 圆 环 (参考 图 4-3-2) 。 


三 角 多 边 形 


图 4-3-2 通过 三 角 多 边 形 绘制 圆 环 


决定 分 割 数 的 方法 有 很 多 ， 这 里 按照 分 割 后 圆周 长 的 一 份 约 为 10 像素 来 决定 分 
割 数 。 由 于 半径 为 的 圆 的 圆周 长 为 2rr ， 按 照 一 份 圆周 长 为 10 像素 来 计算 ， 


圆 环 会 被 分 割 为 10 份 ， 也 就 是 上 面 程序 中 的 


059 | nDivideNum = ( int )( ( 2.0f * PI *r )/ 10 ); 


这 一 行 。 但 是 如 采 这 个 分 割 数 过 大 ， 所 需要 的 顶点 数 也 会 增多 ， 这 时 束 可 能 有 
缓冲 区 溢出 的 风险 ， 因 此 这 里 对 分 割 数 设置 了 MAX_DIVIDE_NUM 这 一 上 限 。 


if ( nDivideNum > MAX_DIVIDE_NUM ) nDivideNum = MAX_DIVIDE_ NUM; 


这 样 分 割 数 就 不 会 超过 上 限 值 MAX_DIVIDE NUM 了 。 


然后 根据 已 经 决定 的 分 割 数 ， 计 算出 每 一 份 多 边 形 的 角度 ， 并 将 其 放 入 变量 
fAngleDiff 中 。 这 个 角度 通过 圆 一 周 的 角度 2r 除 以 分 割 数 就 可 以 得 到 。 


061 | fAngleDiff = 2.0f * PI / nDivideNum; 


接 下 来 设置 了 1 与 r2 两 个 半径 。 其 中 1 是 光环 内 圆 的 半径 ，r2 是 光环 外 圆 的 
半径 。 然 后 考虑 通过 这 两 个 半径 以 及 刚才 计算 得 到 的 分 割 数 ， 来 用 四 角形 表现 
分 割 出 的 每 份 图 形 。 实际 上 程序 中 绘制 每 份 图 形 的 是 梯形 参考 图 4-3-3) ， 这 
样 束 可 以 将 一 个 圆 形 转换 为 寿 干 个 多 边 形 进 行 绘制 了 。 而 只 要 将 圆 分 割 成 足够 
小 的 多 边 形 ， 肉 眼看 上 去 就 不 会 有 问题 。 


图 4-3-3 ”将 圆 环 分 割 后 得 到 的 图 形 为 梯形 


然后 ， 分 割 数 为 多 少 ， 就 循环 多 少 次 。 用 梯形 表示 角度 在 fAnglel 与 fAngle2 之 
间 、 半 径 在 r1 与 r2 之 间 的 区 域 , 并 计算 每 个 梯形 的 四 个 角 的 坐标 。 此 时 假设 


。p 1 是 半径 r2 且 角 度 为 fAnglel 的 位 置 


。p ,是 半径 12 且 角 度 为 fAngle2 的 位 置 


。p， 是 半径 rl 且 和 角度 为 fAnglel 的 位 置 


。p 4 是 半径 rl 且 角 度 为 fAngle2 的 位 置 


这 样 就 可 以 通过 p1、p，。、p 3、p4 表示 四 个 角 的 坐标 (参考 图 4-3-3) 。 例 如 
由 于 p1 到 圆心 的 距离 为 r2， 且 角度 为 fAnglel1， 因 此 令 r2=r ,、fAnglel =01、 


圆心 坐标 CenterPos=(c , cy )， 根 据 三 角 函 数 的 定义 ， 有 


Plz = 7T2COSH1 十 ca 


Ply 一 72 SI1N t1 十 Cy 


这 对 应 代码 清单 4-3-1 中 的 


v2Pos[i 2 * cosf( fAngle1 ) + CenterPos.x; 
v2Pos[i , 2 * sinf( fAngle1 ) + CenterPos.y; 


这 一 部 分 ， p> Pp; 、p 4 与 此 同 理 。 


上 文 介绍 了 绘制 圆 形 光线 的 原理 ， 但 是 这 个 方法 还 存在 一 点 问题 。 在 示例 程序 
Ray_3_1.cpp 中 ， 将 激光 图 片 用 于 纹理 贴图 (texture mapping) 时 ， 仅 v 坐标 会 
被 设置 为 有 效 值 ， 而 u 坐标 则 始终 为 0 (具体 请 参考 Ray_3_1.cpp 内 部 ， 
DrawQuadranglePic 函数 内 ) 。 这 是 由 于 如 果 对 uw 坐标 也 设置 一 个 有 效 值 的 话 ， 
当 圆 周 变 小 时 ， 梯 形 会 变 得 细 长 ， 此 时 由 梯形 对 角 线 切 分 而 成 的 三 角 多 边 形 也 
会 变 得 极度 细 长 ， 那 么 仅 根据 3 个 顶点 的 uv 坐标 将 无 法 正确 计算 三 角 多 边 形 内 
部 的 uy 坐标 ， 玖 会 发 生 所 谓 的 “ 伪 影 ”(artifacts) 现象 。 


虽然 从 数学 上 来 看 是 分 割 成 了 等 长 距离 (如 10 像素 ) 的 圆周 ， 但 其 实 分 割 得 到 
的 梯形 的 长 度 是 会 变化 的 ， 因 为 分 割 数 始终 为 整数 ， 特 别 是 圆周 很 小 时 分 割 数 
也 会 很 小 ， 此 时 如 果 分 割 数 产生 变化 ， 圆 周 长 度 的 变化 就 会 非常 清晰 地 反映 到 
梯形 长 度 的 变化 上 。 但 是 在 纹理 贴图 时 ， 如 有 果 坐标 始终 固定 为 0， 就 没有 办 法 
作出 螺旋 状 的 和 激光。 因此， 如 果 想 实现 螺旋 状 的 圆 形 激光 ， 还 需要 对 多 边 形 进 
行 更 加 精细 的 分 割 。 


4.4 实现 带 追 踩 效 果 的 激光 


ken Wo rd RANK/hard 
左右 判定 、 外 积 、 旋 转速 度 mn 


如 果 要 选 出 射击 游戏 中 最 具 代 表 性 的 激光 武器 ， 那 么 一 定 少 不 了 带 追 踩 效 果 的 
激光 。 本 小 节 就 来 一 起 实现 可 以 对 鼠标 指针 进行 追踪 的 激光 吧 。 


本 人 小节 将 讲解 如 何 实现 追 踩 目标 物体 并 可 弯曲 的 激光 (追踪 激光 ) 。 这 种 激光 
在 很 多 射击 游戏 及 动作 游戏 中 都 会 经 常 出现。 


图 4-4-1 追 踩 目标 物体 并 可 弯曲 的 激光 


ee 葛 有 没有 可 能 实现 ， 在 程序 的 虚拟 世界 

中 ， 通 过 简单 的 算法 就 可 以 制作 出 来 ， 请 参考 示例 程序 Ray_4_1.cpp。 运 行 这 个 

程序 大 本 从 本 再 者 的 光志 人生 时 着 起 来 有 有 点 

像 由 知 丰 条 扫地 他 生 < 之 所 以 会 显得 策 拙 ， 主 要 还 是 因为 算法 进行 了 一 定 的 简 

I 会 详细 说 明 。 0 我 们 首先 还 是 先 看 
吧 。 


Ray_4_1.cpp 的 MoveRay 函数 中 ， 会 将 激光 按 某 个 长 度 (程序 中 是 
SEGMENT_LEN) 分 割 为 很 多 小 节 ， 然 后 对 每 节 激 光 设 置 不 同 的 方向 。 所 产生 
的 效果 就 是 刚 开 始 激光 向 水 平方 向 发 射 ， 当 鼠标 指针 在 激光 行进 方向 左 侧 时 ， 
激光 就 向 左 转向 (图 4-4-2 左 ) ， 而 当 鼠 标 指针 在 右 方 时 就 向 右 转 向 (图 4-4-2 
右 ) ， 激 光 就 好 像 在 追踪 鼠标 指针 一 样 。 由 于 每 次 转向 的 旋转 速度 是 固定 的 
(程序 中 是 ANGLE_SPEED) ， 因 此 鼠标 指针 如 果 位 于 偏离 激光 行进 方向 很 远 
的 位 置 ， 就 可 以 避 开 激光 的 追踪 。 


图 4-4-2 ”将 激光 按 某 个 长 度 分 割 为 多 个 小 节 并 更 改 其 方向 实现 弯曲 

为 了 实现 这 个 效果 ， 从 数学 角度 来 看 最 重要 的 是 判断 目标 物体 是 在 激光 行进 方 
向 的 左 侧 还 是 右 侧 。 我 们 可 以 将 其 转化 为 “一 个 点 在 一 个 有 癌 线 段 的 左 侧 还 是 右 
侧 ” 这 样 一 个 数学 问题 (参考 图 4-4-3) 。 


图 4-4-3 ”一 个 点 在 线段 的 左 侧 还 是 右 侧 


可 能 数学 好 的 读者 会 想到 ， 只 要 将 有 向 线段 朝向 的 角度 ， 以 及 从 当前 的 激光 位 
置 所 看 到 的 目标 物 的 角度 进行 比较 就 可 以 判断 出 左右 了 。 但 是 这 并 不 是 一 个 好 
方法 ， 首 先 一 旦 涉及 角度 ， 就 必须 使 用 计算 量 较 大 的 反 三 角 画 数 ， 会 导致 速度 


变 慢 。 其 次 ， 上 面 所 说 的 角度 ， 一 般 都 是 相对 x 轴 的 角度 ， 将 这 样 的 两 个 角度 
进行 比较 时 ， 判 断 一 方 在 另 一 方 的 左 侧 还 是 右 侧 ， 还 是 比较 碎 烦 的 。 至 少 仅 对 
比 角 度数 值 的 大 小 ， 是 无 法 直接 判断 是 在 左 侧 还 是 右 侧 的 。 因 此 Ray_4_1.cpp 的 


MoveRay 函数 中 就 使 用 了 其 他 方法 来 计算 角度 。 具 体 来 说 就 是 执行 了 下 面 的 判 


定 

代码 清单 4-4-1 左右 侧 判定 (Ray_4_1.cpp 片段 ) 

073 | if ( ( v2Forward.x * v2Aim.y - v2Forward.y * v2Aim.x ) > 0.0f 
) I 

v2Forward 是 代表 激光 行进 方向 的 向 量 ，v2Aim 是 从 当前 激光 位 置 看 到 的 指向 鼠 


标 指针 的 同 量 (参考 图 4-4-4) 。 


v2Forward 


; v2 Azm 


腿 标 指针 


图 4-4-4 ”激光 行进 方向 向 量 及 指向 鼠标 指针 的 向 量 


令 v2Forward=(F , 下 )、v2Aim=(A , Ay )， 代 码 清单 4-4-1 的 判断 语句 其 实 就 是 
在 检查 FA -F, Ay 所 得 到 的 值 的 符号 。 这 是 为 什么 呢 ? 可 能 很 多 人 会 首先 想到 
向 量 的 外 积 〈 的 一 部 分 ) ， 而 从 这 个 角度 来 考虑 也 是 最 容易 理解 的 。 所 谓 向 量 
的 外 积 ， 比 如 有 两 个 三 元 向 量 a =(as, ay , qz ) 与 b=(b,b,,b,)， 则 有 


Q Xi 一 !( ayb: 一 Qzpy， a-bzr — azrb-., az b, 一 arpa } 


lallb|sing :Nn 


所 得 到 的 结果 是 一 个 向 量 ，6 是 向 量 a 与 b 的 夹 角 ,元 的 长 为 1， 并 且 同 时 与 向 
量 a、b 都 焉 直 (这 样 的 向 量 会 有 两 条 ， 具 体 为 指向 哪个 方向 的 向 量 则 需要 根 
据 坐 标 系 来 看 ) 。 


虽然 我 们 要 实现 的 追踪 效果 只 需要 考虑 2D 平面 的 情况 ， 但 为 了 计算 外 积 ， 这 里 
将 其 暂时 扩展 到 3D， 令 v2Forward=(F、, 已 ,0)、v2Aim=(4,A,, 0)。 取 这 两 个 
向 量 的 外 积 ， 可 以 看 到 外 积 的 x 分 量 (向 量 a 与 向 量 b 时 为 ayb,-asby,) 及 y 分 
量 (向 量 a 与 向 量 b 时 为 a,b-a.b,) 中 ， 都 有 向 量 z 分 量 的 乘法 运算 〈 两 个 向 
量 的 z 分 量 都 为 0) ， 因 此 外 积 的 x 分 量 与 y 分 量 都 为 0。 只 有 外 积 的 z 分量 

(向 量 a 与 向 量 b 时 为 ov by -ay bx ) 在 一 般 情况 下 不 为 0， 等 于 FA -FyA,。 
这 就 是 之 前 程序 中 所 写 的 判断 语句 。 


根据 上 面 的 等 式 可 知 ， 外 积 的 结果 等 于 |allblsin 6 。 如 果 将 元 作为 固定 指向 
某 个 特定 方向 的 单位 向 量 的 话 ， 由 于 |a| 与 1b|， 即 两 向 量 的 长 度 不 可 能 为 负 ， 
所 以 FA -Fy A 的 值 的 符号 束 由 两 向 量 的 夹 角 9 的 sin9 的 符号 决定 。 如 果 F、 
Ay -Fy A 的 值 的 符号 反 转 ， 则 sing 的 符号 也 反 转 。 由 于 sinb 是 奇 画 数 ，sing 的 
符号 与 9 的 符号 相同 〈 只 限 -r< 6 < 区 时) ， 因 此 最 终 FA -FA 的 符号 就 决定 
了 两 向 量 的 夹 角 9 的 符号 ， 也 就 是 说 ， 只 要 看 FA -Fy A 的 结果 ， 就 能 对 癌 量 
做 左右 判定 。 上 面 的 说 明 可 能 有 点 长 ,希望 大 家 可 以 正确 理解 。 


既然 已 经 明白 了 为 什么 FF A) -Fy A 的 符号 可 以 作为 左右 判定 的 条 件 ， 接 下 来 瑟 
可 以 在 程序 中 使 用 这 个 值 。 那 么 当 该 值 为 正 时 ， 究 竟 会 判定 为 左 侧 还 是 右 侧 
呢 ? 由 于 这 个 问题 是 放 在 之 前 所 构想 的 2D 场景 中 来 考虑 的 ， 用 外 积 可 能 不 太 好 
理解 。 因 此 我 们 可 以 先 考虑 FF =1、P =0 这 一 特殊 场景 。 此 时 激光 会 笔直 向 右 
方 行进 ， 如 末 目 标 方向 的 y 分 量 A 为 正 ， 则 在 行进 方 同 右 侧 ， 反 之 ， 如 采 Ay 为 
人 负 ， 则 在 行进 方向 左 侧 。 同 时 当 F =1，F,=0 时 ，F A -F) A 的 值 就 等 同 于 A) 
的 值 ， 即 FA -Fy A 的 值 为 正 时 在 行进 方向 右 侧 ， 为 负 则 在 行进 方向 左 侧 。 
此 在 Ray_4_1.cpp 的 MoveRay 琅 数 中 ， 如 果 FFA) -已 4 的 值 为 正 ， 束 认为 鼠标 
指针 在 激光 行进 方向 右 侧 ， 随 着 角度 值 的 增加 ， 行 进 方向 就 会 沿 顺 时 针 转 向 

( 右 转 ) 。 相 反 当 FA -PE A 的 值 为 员 时 ， 则 认为 鼠标 指针 在 激光 行进 方向 左 
侧 ， 随 着 角度 值 的 减少 ， 行 进 方向 就 会 沿 逆 时 针 转 向 〈 左 转 ) 。 通 过 这 种 方 
式 ， 最 终 就 实现 了 无 论 鼠 标 指 针 在 行进 方向 的 任意 一 人 出， 激光 都 会 对 鼠标 指针 
进行 妃 味 的 效果 。 
代码 清单 4-4-2” MoveRay 男 数 (Ray_4_1.cpp 片段 ) 


073 | if ( ( v2Forward.x * v2Aim.y - v2Forward.y * v2Aim.x ) > 0.0f 
) 【 


074 | fAngle += ANGLE_SPEED， 
075 | } 

076 | else { 

077 | fAngle -= ANGLE_SPEED， 
078 | 


像 上 面 这 样 ， 根 据 追 踪 对 象 在 行进 方向 的 左 侧 还 是 右 侧 ， 来 以 一 定 旋转 速度 转 
向 的 算法 ， 其 实 还 无 法 做 出 很 流畅 的 追踪 效果 。Ray_4_1.cpp 中 的 激光 ， 之 所 以 
看 起 来 像 上 电 在 扭 来 扭 去 ， 其 最 大 原因 就 是 无 论 追 踪 对 象 偏离 行进 方向 很 远 ， 

还 是 在 行进 方向 正 前 方 ， 都 使 用 了 相同 的 旋转 速度 转向 。 特 别 是 当 追 踪 对 象 大 
致 位 于 行进 方向 正 前 方 时 ， 如 果 仍 使 用 很 高 的 旋转 速度 转向 ， 就 会 让 激光 在 一 
次 转向 过 程 中 一 会 儿 向 左 转 一 会 儿 向 右 转 ， 产 生 大 量 无 用 的 扭 动 ， 所 呈现 的 视 
觉 效 果 也 很 差 (参考 图 4-4-5) 。 


图 4-4-5 ”如 果 不 考虑 行进 方向 与 追踪 对 象 的 位 置 关 系 ， 了 就 会 造成 不 自然 的 扭 动 
针对 追踪 对 象 与 行进 方向 的 位 置 关系 所 产生 的 问题 ， 示 例 程序 Ray_4_1a.cpp 对 
原 程 序 做 了 修正 ， 让 旋转 速度 可 以 动态 变化 〈 当 物体 在 行进 方向 正 前 方 时 几乎 
不 转向 ) 。 程 序 中 的 重点 是 MoveRay 函数 的 以 下 部 分 (代码 清单 4-4-3) 。 


代码 清单 4-4-3 ”旋转 速度 可 动态 变化 的 MoveRay 画 数 (Ray_ 4_1la.cpp 片 段 ) 


| fLength = sqrtf( v2Aim.x * v2Aim.x + v2Aim.y * v2Aim.y ); 
| v2Aim.x /= fLength; v2Aim.y /= fLength; 

078 | fCross = v2Forward.x * v2Aim.y - v2Forward.y * v2Aim.x; 
| fAngle += ANGLE_ SPEED * fCross / SEGMENT_LEN; 


| 


可 以 看 到 Ray_4_1.cpp 中 的 证 语句 没有 了 ， 而 且 还 同 激 区 投射 角度 fAngle 增加 
了 一 个 固定 值 。 那 么 所 增加 的 值 有 什么 意义 呢 ? 


还 是 按照 顺序 来 看 吧 。 首 先 代 码 清单 4-4-3 中 最 开始 的 


fLength = sqrtf( v2Aim.x * v2Aim.x + v2Aim.y * v2Aim.y ) 
V2Aim.x /= fLength; v2Aim.y /= fLength; 


这 两 行程 序 将 以 激光 为 起 点 、 指 向 追踪 目标 鼠标 指针 的 向 量 (v2Aim) ， 变 换 为 
了 长 为 1 的 向 量 ， 即 单位 向 量 。 在 此 基础 上 通过 


078 | fCross = v2Forward.x * v2Aim.y - v2Forward.y * v2Aim.x; 


计算 出 了 V2Forward 与 v2Aim 的 外 积 的 z 分 量 。 我 们 在 前 文中 已 经 讲 过 ， 取 问 
量 a 与 癌 量 b 的 外 积 时 ， 其 外 和 只 结 采 的 长 度 为 lallblsin9。 刚 才 已 经 将 v2Aim 
变换 为 了 单位 向 量 ， 那 么 此 时 变量 fCross 的 值 ， 就 是 将 向 量 v2Forward 的 长 ， 
乘 以 v2Forward 与 v2Aim 的 夹 角 日 6 的 sin6 所 得 到 的 。 让 我 们 再 看 看 
Ray_4_1a.cpp 中 更 往 上 的 部 分 。 


054 | v2Forward.x = SEGMENT_LEN * cosf( fAngle ); 
055 | v2Forward.y = SEGMENT_LEN * sinf( fAngle ); 


可 以 看 到 v2Forward 向 量 的 长 被 设置 为 了 了 SEGMENT_LEN。 因 此 


079 | fAngle += ANGLE_ SPEED * fCross / SEGMENT_LEN; 


这 一 行 中 的 fCross / SEGMENT_LEN 就 等 同 于 sin0。 前 面 已 经 提 到 过 ，sing 是 
奇 画 数 ， 在 -fr<6< 区 的 范围 内 0 的 符号 就 是 sing 的 符号 ，0 为 0 则 sin0 也 为 
0， 当 追踪 对 象 在 行进 方向 的 正 对 面 时 ，0 =0，sin0 =0;， 而 对 象 偏离 行进 方向 越 
远 ，sin9 也 就 越 大 (如果 是 负 方 向 则 越 小 ) 。 上 面 的 程序 中 将 sing 乘 以 常数 
ANGLE_SPEED 所 得 的 值 作为 了 旋转 速度 ， 这 样 就 可 以 根据 追踪 对 象 偏离 行进 
方向 的 具体 情况 来 控制 旋转 速度 了 。 


但 是 上 例 中 旋转 速度 的 最 大 值 是 ANGLE_SPEED， 当 sin 6=+1， 即 6 为 “2 时 
就 产生 了 最 大 旋转 速度 。 如 果 9 的 绝对 值 超 过 了 2 ， 根 据 上 例 可 知 ， 角 度 〈 绝 
对 值 ) 越 大 ， 旋 转速 度 越 小 ， 当 6 的 绝对 值 为 工时 旋转 速度 完全 减 小 至 0。 这 在 
实际 程序 中 ， 就 相当 于 追踪 对 象 已 经 移动 到 了 行进 方向 的 后 面 。 而 角度 越 接近 
， 妃 踪 对 象 就 越 接近 正 后 方 。 当 追踪 对 象 移动 到 正 后 方 时 ， 妃 踪 效果 完全 停 

止 ， 这 样 的 处 理 也 是 符合 常理 的 。 


4.5 [ 进 阶 ] 绘制 大 幅度 弯曲 的 曲线 时 的 难点 
ken Word 


曲率 、 曲 线 的 粗细 、 插 值 曲线 、 反 射 


RANK/very hard 


a 曲线 时 ， 必 须要 考虑 曲线 的 粗细 问题 。 本 小 节 就 来 一 起 探究 这 一 问题 的 


计算 机 在 绘制 弯曲 的 光线 等 有 视 度 的 曲线 时 ， 会 遇 到 一 些 问题 ， 本 小 节 将 介绍 

如 何 解 决 这 些 问题 。 例 如 在 4.4 节 中 ， 在 曲线 的 行进 方向 建立 垂直 向 量 (也 就 是 

法 线 向 量 ) ， 然 后 将 其 加 到 曲线 的 位 置 向 量 ， 通 过 这 种 方法 实现 了 有 宽度 的 曲 

线 的 绘制 (参考 图 4-2-2) 。 这 个 方法 在 曲线 的 弯曲 程度 〈 即 曲率 ) 不 是 很 大 的 

时 候 没 有 什么 问题 ， 但 是 当 曲 率 增 大 到 一 定 程 度 后 ， 多 边 形 会 因为 严重 扭曲 而 

0 
4-5-1) 。 


图 4-5-1 多 边 形 产 生 重 到 


解决 这 一 问题 有 多 种 方法 ， 其 中 一 个 方法 是 检测 多 边 形 重 共 的 部 分 ， 对 重 人 车间 
分 不 进行 绘制 。 在 曲线 的 曲率 不 是 很 大 时 ， 采 用 这 种 方法 能 获得 不 错 的 显示 效 
果 。 


但 是 如 果 曲 率 进 一 步 增加 ， 与 曲线 弯曲 的 一 侧 相 对 的 另 一 侧 ( 即 曲 线 的 外 侧 ) 
会 变 得 细 长 。 这 是 因为 将 曲线 沿 行进 方向 等 距离 分 割 时 ， 曲 线 外 侧 的 长 度 会 变 
长 ， 其 实 这 个 问题 本 质 上 还 是 因为 分 割 数 不 够 而 引起 的 (参考 图 4-5-2) 。 


图 4-5-2 ”曲率 变 大 时 外 侧 变 得 细 长 


解决 这 一 问题 也 有 不 少 方法 ， 其 中 一 个 方法 是 让 曲线 按照 行进 方 癌 分 割 的 宽 
度 ， 根 据 曲率 的 不 同 进行 变化 。 如 果 曲 率 小 ， 那 么 分 割 数 也 少 ;而 如 果 曲 率 
大 ， 则 会 进行 更 加 细密 的 分 割 。 但 是 这 种 情况 下 ， 沿 用 4.4 节 介 绍 的 以 一 定 速 度 
旋转 曲线 的 处 理 方式 来 绘制 曲线 会 变 得 非常 困难 。 因 为 需要 首先 将 运动 轨迹 表 
示 为 矩阵 序列 ， 然 后 作出 一 条 矩阵 序列 所 通过 的 插值 曲线 (如 样 条 曲线 spline 
curve 等 ) ， 并 使 用 可 变 雌 距 将 差 值 曲 线 分 割 等 一 系列 操作 ， 非 常 麻烦 。 


不 仅 如 此 ， 如 果 考 虑 到 反射 等 可 以 让 曲线 以 接近 180 度 角 折返 的 情况 ， 从 数学 
角度 上 来 讲 就 等 于 允许 一 个 不 连续 的 微分 系数 ， 情 况 将 变 得 更 加 复杂 。 此 时 即 
便 将 曲线 沿 法 线 向 量 方向 扩 宽 ， 也 依然 会 造成 反射 部 分 中 曲线 的 中 心 裸 露出 
来 ， 从 而 形成 一 个 难看 的 缺口 (参考 图 4-5-3) 。 


中 心 部 分 裸露 


图 4-5-3 ”反射 部 分 中 曲线 的 中 心 部 分 裸露 


如 果 想 要 绘制 光线 ， 这 显然 不 是 我 们 想 要 的 效果 。 我 们 希望 即使 以 接近 180 度 

的 角 反 射 时 ， 也 能 绘制 出 曲线 中 心 部 分 两 侧 都 有 图 像 的 正常 光线 。 这 个 问题 当 

然 也 有 解决 方法 ， 比 如 我 们 可 以 将 曲线 分 割 后 的 接 缝 处 用 圆 形 填充 。 这 样 处 理 

en 
分 4-5-4 


图 4-5-4 ” 接 锋 处 用 圆 形 填充 以 保证 曲线 的 宽度 


昌 然 通过 这 种 方法 可 以 方便 地 实现 曲线 以 任意 角度 弯曲 ， 不 过 仍然 存在 缺点 。 
比如 在 绘制 光线 时 ， 由 于 在 接 颖 处 填充 了 圆 形 ， 圆 形 之 间 必 定 会 有 重叠 的 部 
分 ， 因 此 如 果 要 绘制 亮度 均匀 的 曲线 就 比较 难 。 


综 上 可 以 看 出 ， 曲 线 随 着 其 曲率 的 增 大 ， 绘 制 的 难度 也 变 得 越 来 越 大 。 绘 制 不 
透明 的 曲线 还 好 说 ， 如 采 想 要 绘制 光线 等 有 半 透 明 效 果 的 曲线 ， 以 之 前 例子 中 
普通 的 图 片 素材 填充 是 不 可 能 实现 的 ， 而 要 根据 亮度 计算 的 结果 准备 图 片 素 

材 ， 比 如 制作 第 一 条 曲线 时 只 要 根据 需求 准备 单独 的 图 片 即 可 ， 而 制作 第 二 条 
曲线 所 需 的 图 片 就 需要 根据 上 一 条 曲线 所 计算 得 到 的 透明 度 重 新 准备 。 在 绘制 
曲线 时 类 似 这 样 的 小 技巧 还 有 不 少 ， 总 之 要 制作 完美 的 曲线 效果 是 非常 棕 珊 

的 。 - 面 所 讲 的 备 种 绘制 曲线 的 万 法 中 ， 并 不 存在 一 种 理想 的 解决 方案 ， 还 是 
需要 根据 具体 需求 进行 选择 ， 尤 其 是 需要 考量 一 下 游戏 中 是 不 是 真 的 需要 这 人 么 
精细 的 效果 ， 必要 的 话 可 以 适当 做 一 些 妥协 。 


如 果 拓 展 到 3D 空间 ， 那 么 绘制 一 条 有 宽度 的 曲线 就 会 有 更 多 问题 出 现 。 根 据 视 
和 的 丰 同 3D 出线 会 有 多 种 多 样 的 变化 因此 绘制 一 条 粗细 固定 的 3D 曲线 ， 

要 比 2D 复杂 很 多 。 特 别 是 当 曲 线 完全 与 视线 平行 ， 即 曲线 以 视点 为 起 点 一 直 向 
内 征 人 时， 仓储 将 基线 皖 归 定向 中 分 别 ， 最 终 主 现 的 效果 也 还 总 像 让 同一 坐 
慰 系 内 ， 这 时 即使 想 将 各 尽 肌 谷 杯 党 在 同 2D 平面 上 来 计算 其 法 线 同 量 也 会 存 
在 一 些 问 题 ， 使 曲线 具有 宽度 本 身 都 会 变 得 非常 困难 。 如 果 不 注意 上 面 的 问题 
忠 去 绘制 曲线 ， 结 果 束 会 让 曲线 看 起 来 好 像 一 条 轻 允 纸 的 绸 市 。 不 过 这 个 问题 
征 有 一 些 解决 方法 的 ， 但 是 超出 了 本 书 的 研究 范围 ， 这 里 殉 不 做 介绍 了 。 


第 5 章 画面 切换 效果 


5.1 


5.2 


5.3 


5.4 


5.5 


5.6 


水 平 扫描 式 画 面 切 换 

和 斜 问 扫 朱 式 画面 切换 

使 用 市 模糊 效果 的 分 界线 进行 画面 切换 
使 用 圆 形 进 行 画面 切换 
雨刷 式 画 面 切换 

[ 进 阶 ] 多 种 多 样 的 画面 切换 方法 


5.1 水 平 扫描 式 画 面 切 换 


ken Word 


三 角 多 边 形 、 纹 理 素材 、uv 坐标 


RANK/normal 


文字 冒险 及 RPG 游戏 中 进行 场景 转换 时 ， 经 常会 使 用 将 两 张 图 像 进行 切换 的 方 
式 。 在 本 小 节 ， 就 让 我 们 来 一 起 学 习 最 基本 的 水 平方 向 的 画面 切换 吧 。 


本 小 下 将 讲解 画面 切换 效果 中 最 基本 的 水 平方 癌 扫 描 式 画面 切换 。 


图 5-1-1 水 平方 向 扫描 式 画面 切换 程序 
示例 程序 Wipe_1_1.cpp 实现 了 这 一 效果 ， 程 序 中 的 重点 是 以 下 部 分 。 
代码 清单 5-1-1 进行 水 平方 向 画面 切换 的 主要 部 分 (Wipe_1_1.cpp 片段 ) 


035 | int InitChangingPictures( void ) // 仅 调用 一 次 
936 | { 

037 | fBoundary_x = 0.0f; // 边界 的 初始 位 置 
038 | fBoundary_vx = 10.0f; // 边界 在 x 方向 的 速度 
939 | 

040 | return 090; 

641 | } 

042 | 

043 | 

044 | int DrawChangingPictures( void ) // 每 帧 调用 一 次 
045 | { 

046 | fBoundary_x += fBoundary_vx; // 移动 边界 线 
047 | if ( fBoundary x < 0.0f ) { // 画面 左 端 

048 | fBoundary _x = 0.0f; 

049 | fBoundary_vx = -fBoundary_vx; 

050 | 

051 | if ( fBoundary_ x > VIEW_WIDTH ) { // 画面 右 端 

052 | fBoundary_x = VIEW_WIDTH ， 

053 | fBoundary_vx = -fBoundary_vx; 

054 | } 


056 | Draw2DPolygon( 0.0f， 0.0f，0.0f， 

0.0f， 

057 | 0.0f, VIEW_HEIGHT，0.0f， 

1.0f, 

058 | fBoundary_x, 0.0f, fBoundary x / 
VIEW WIDTH, 0.0f, 

059 | &d_tPic2 ); 

060 | Draw2DPolygon( fBoundary_x, 0.0f, fBoundary x / 
VIEW WIDTH, 090.0f, 

061 | 0.0f, VIEW_HEIGHT，0.0f， 

1.0f, 

062 | fBoundary_x, VIEW_ HEIGHT, fBoundary x / 
VIEW WIDTH, 1.0f, 

063 | &d_tPic2 ); 

064 Draw2DPolygon( fBoundary_x, 0.0f, fBoundary x / 
VIEW WIDTH, 90.0f, 

065 | fBoundary_x, VIEW_HEIGHT, fBoundary x / 
VIEW WIDTH, 1.0f, 

066 | VIEW_WIDTH, 0.0f, 1.0f, 

0 .0f, 

067 | &d_tPic1 ); 

068 | Draw2DPolygon( VIEW_WIDTH， 0.0f, 1.0f, 

0.0f， 

069 fBoundary_x, VIEW_HEIGHT, fBoundary x / 
VIEW WIDTH, 1.0f, 

070 | VIEW_WIDTH， VIEW_HEIGHT, 1.0©f, 

1.0f, 

071 | &d_tPic1 ); 

072 | 

073 | return 0; 

074 | } 

程序 首先 在 InitChangingPictures 范 数 中 对 两 张 图片 的 边界 线 位 置 fBoundary_x 及 


边界 线 的 移动 速度 fBoundary_vx 进行 了 初始 化 。fBoundary_x 被 设置 为 


// 边界 的 初始 位 置 


图 片 边 界线 的 初始 位 置 在 


fBoundary_x = 0.0of; 


画面 左 端 。 而 fBoundary_vx 为 


fBoundary_vx = 10.0f; // 边界 在 x 方向 的 速度 


图 片 边界 线 会 以 每 帧 10 像素 的 速度 向 画面 右 方 移动 。 


中 物体 接触 到 画面 


动 。 关 于 这 一 部 分 的 详细 处 理 ， 请 参考 1.1 市 。 
然后 就 是 最 关键 的 部 分 ， 即 实际 使 用 2D 多 边 形 泻 染 两 张 图 片 (56~71 行 ) 。 


虽然 多 j 


NA/ 


TT 


在 接 下 来 的 DrawChangingPictures 汞 数 中 ， 会 实际 移动 边界 线 。 其 中 用 到 了 1.1 
两 端 就 折返 的 方法 ， 让 边界 线 在 画面 两 端 之 间 循 环 往复 运 


边 形 本 身 的 形状 并 没有 什么 统一 的 规范 ， 不 过 大 部 分 显卡 只 文 持 泻 染 二 


角 和 多边形 (形状 为 三 角形 的 多 边 形 ) ， 本 例 也 是 通过 组 合 三 角 多 边 形 来 泻 染 了 


VIEW_WIDTH， 
059 
060 
VIEW_WIDTH， 


VIEW_WIDTH, 
963 | 
064 
VIEW_WIDTH, 
965 | 
VIEW_WIDTH, 
966 | 
9.0f， 

967 | 
968 | 
9.0f， 

069 
VIEW_WIDTH, 
070 | 
1.0f， 

971 | 


其 


~ 


Draw2DPolygon( 0.0f， 


0.0f， 


Draw2DPolygon( 
0.0f, 


1.0f， 


Draw2DPolygon( 
0.0f， 


1.0f， 


Draw2DPolygon( 


1.0f， 


90.0f， 
fBoundary_x, 


&d_tPic2 ); 
fBoundary_x, 


0.0f, 
fBoundary_x, 


&d_tPic2 ); 
fBoundary_x, 


fBoundary_x, 
VIEW_WIDTH, 


&d_tPic1 ); 
VIEW_WIDTH, 


fBoundary_x, 


VIEW_ WIDTH, 


&d_tPic1 ); 


中 Draw2DPolygon 函数 如 下 所 示 。 


0.0f， 
VIEW_HEIGHT， 


0.0f， 


0.0f， 
VIEW_HEIGHT， 


VIEW_HEIGHT， 


0.0f， 
VIEW_HEIGHT， 


0.0f， 


0.0f， 
VIEW_HEIGHT， 


VIEW_HEIGHT， 


共 需 要 2x2=4 个 三 角 多 边 形 。 在 程序 


0.0f， 
0.0f， 


fBoundary_X 


fBoundary x / 
9.0f， 


fBoundary x / 


fBoundary x / 
fBoundary x / 


0f, 


1.0f， 
fBoundary x / 


1.0f， 


代码 清单 5-1-2 Draw2DPolygon 范 数 (Wipe_1_1.cpp 片段 ) 


923 | 
924 | 
925 | 
926 | 


int Draw2DPolygon( float x1, float y1，Tfloat U1，Tfloat v1, 


float x2, float y2, float u2, float v2, 
float x3, float y3, float u3, float v3, 


TEX_PICTURE * 


pTexPic ); 


// 泻 染 2D 多 边 


NY 


| 


各 参数 的 意思 如 下 。 
。Xl, yl : 三 角 多 边 形 的 顶点 
。ul, v1 : 三 角 多 边 形 的 顶点 1 的 u、v 坐标 
。 x2, y2 : 三 角 多 边 形 的 ] 
。u2, V2 : 三角 多 边 形 的 顶点 
。x3, y3 : 三 角 多 边 形 的 顶点 3 的 x、y 坐标 
。u3, V3 :三角 多 边 形 的 顶点 3 的 u、v 坐标 
。pTexPic : 图 片 素材 的 指针 

。 能 有 效 利用 多 边 形 的 uv 坐标 

考虑 到 有 很 多 读者 对 多 边 形 贴图 还 不 是 很 了 解 ， 这 里 对 uv 坐标 进行 一 些 简 

单 的 介绍 。 多 边 形 在 3D 演 染 时 经 常 使 用 ， 能 够 将 纹理 图 片 (texture) 贴 到 


面 。 因 此 多 边 形 的 各 顶点 都 会 与 纹理 中 的 某 个 坐标 相对 应 。 而 各 顶点 在 
图 片 中 的 坐标 就 称 为 uv 坐标 (图 5-1-2) 。 


XY 坐 标 


Uv 坐标 


图 片 
(纹理 ) 


图 5-1-2 通过 uv 坐标 实现 多 边 形 的 顶点 与 图 片 中 的 坐标 相对 应 


Draw2DPolygon 函数 中 也 对 3 个 顶点 同时 设置 了 画面 上 的 显示 坐标 xy 以 及 
图 片上 的 演 桨 坐标 uv 。 

接 下 来 就 是 示例 程序 Wipel_1.cpp 中 最 重要 的 部 分 : 将 xy 坐标 对 应 为 uv 坐 
标 。 具 体 来 说 ， 泻 染 两 张 图 片 需要 4 个 多 边 形 ， 每 个 多 边 形 都 有 3 个 顶点 
坐标 ， 这 些 顶点 坐标 可 以 通过 以 下 计算 得 到 。 令 边界 线 的 x 坐标 为 b, ， 男 
面 宽度 为 wp ， 画 面 高 度 为 由 ， 如 图 5-1-3 所 示 ， 有 以 下 关系 成 立 。 


。 对 于 第 1 个 多 边 形 : 
泻 染 xy 坐标 为 (0 0)、(0, hp )、(bx ,0) 三 点 


po. 
es (——.0) _. 
uv 坐标 为 (0, 0)、(0, 1)、wp “三 点 


o 对 于 第 2 个 多 边 形 : 
演 染 xy 坐 标 为 (b、 ,0)、(0, hp )、(b ,hp ) 三 点 


| Bi: 、 ,bs 


0 ;0 (—,1) _. 
uv 坐标 为 wp “、(0,1)、wp 三 点 
o 对 于 第 3 个 多 边 形 : 


泻 染 xy 坐标 为 (b、, 0)、(b、, hp )、(wp ,0) 三 


Bs i 
J (= (=, es 
uv 坐标 为 wp 、 wp 、(1, 0) 三 点 
o 对 于 第 4 个 多 边 形 : 
泻 染 交 坐标 为 (wp , 0)、(bx ,mp )、(wp ,hp ) 三 点 


[2 br 


uy 坐标 为 (1, 0)、 ie 由 \ (1 1T 三 点 


(wy)= (00) (wy )= Ch 0) (x,»)= (wp,0) 
(U,V, 0) (2 VI)= (1;0) 
(my jt0 hs) (w= ,hp) (x,y) = (wp, hp) 


1) (&,2)=(1,1) 


Dx 
20 ? 


图 5-1-3 ”多边 形 与 图 片 坐标 及 uv 坐标 


各 顶点 的 xy 坐标 及 uv 坐标 是 有 一 定 的 对 应 关系 的 。 通 过 图 5-1-3 可 以 看 出 
这 种 关系 为 


这 是 因为 对 于 画面 宽度 为 wp 、 画 面 高 为 hy 的 图 形 来 说 ， 画 面 坐标 所 转换 
的 uv 坐标 会 将 图 形 的 长 宽 映射 到 0~ 的 区 间 内 。 即 图 形 左 上 角 为 (0, 0)、 
右上 和 角 为 (1, 0)、 左 下 角 为 (0, 1)、 右 下 角 为 (1,1) (图 5-1-4) 。 


(0,0) en 


(01) 昌国 用 

图 5-1-4 图 片 的 uv 坐标 

由 于 目前 我 们 要 实现 的 是 画面 切换 效果 ， 必 须 将 画面 的 泻 染 坐标 与 所 要 泻 
染 的 图 片 位 置 对 应 起 来 。 因 此 上 例 中 为 了 使 x 坐标 在 0~wp 范围 内 变化 
时 , u 坐标 可 以 在 0~1 范围 内 变化 ， 用 x 坐标 除 以 画面 宽度 wp 得 到 了 mu 
坐标 ， 同 理 用 y 坐标 除 以 画面 高 度 hy 得 到 了 v 坐标 。 如 果 对 上 述说 明 仍 不 


太 理 解 ， 可 以 对 Draw2DPolygon 函数 中 演 染 的 多 边 形 的 uv 坐标 做 各 种 修改 
来 观察 其 变化 。 


此 外 ， 多 边 形 的 uv 坐标 之 所 以 不 以 像素 而 以 0 一 1 表示 图 片 整 体 的 坐标 ， 

是 因为 这 样 处 理 后 ， 即 便 更 换 了 图 片 也 仍然 可 以 使 用 相同 的 uv 坐标 。 也 就 
征 说 ，uw 坐标 并 不 受 图 片 物 理 大 小 的 影响 ，3D 演 染 中 有 一 种 叫做 Mipmap 
的 贴图 技巧 就 古 基于 这 个 特性 实现 的 ， 可 以 在 贴图 过 程 中 实时 更 换 不 同 大 
小 (或 分 辨 率 ) 的 图 片 。 


5.2 ” 斜 问 扫 描 式 画面 切换 


ken Word 


癌 量 形式 的 直线 ~、 剪裁 RANK/normal 


改变 画面 切换 效果 的 方向 ， 可 以 让 画面 表现 更 加 多 样 化 。 在 水 平方 向 切换 的 基 
础 上 ， 本 小 节 让 我 们 来 一 起 学 习 和 斜 方向 的 画面 切换 效果 。 


本 小 节 将 介绍 和 斜 向 扫描 式 画 面 切 换 效 有 果 。 本 小 节 的 内 容 是 建立 在 5.1 市 的 基础 上 
的 ， 如 有 果 对 多 边 形 等 知识 还 不 够 熟悉 ， 建 议 先 掌握 上 一 小 节 的 内 容 。 


图 5-2-1 斜 向 扫描 式 画 面 切 换 程序 


AS 


Wipe_2_1.cpp 实现 了 和 斜 方向 的 画面 切换 效果 ， 程 序 中 的 重点 是 以 下 部 


代码 清单 5-2-1 ”进行 斜 方向 画面 切换 的 主要 部 分 (Wipe_2_1.cpp 片段 ) 


045 | int DrawChangingPictures( void ) // 每 帧 调用 一 次 
046 | { 

047 | int L 

048 | float xt[3], yt[3]; // 上 侧 直线 上 的 点 
049 | float xb[3], yb[3]; // 下 侧 直 线 上 的 点 
650 | 

051 | fBoundary_t += fBoundary_v; // 移动 分 界线 
952 | if ( fBoundary t < -VIEW WIDTH / 2.0f ) { // 画面 左 端 
053 | fBoundary_t = -VIEW_ WIDTH / 2.0f; 

054 | fBoundary_v = -fBoundary_v; 

055 | } 

056 | if ( fBoundary_t > VIEW_ HEIGHT / 2.9f ) { // 画面 右 端 
057 | fBoundary t = VIEW_HEIGHT / 2.0; 

058 | fBoundary_v = -fBoundary_v; 

059 | } 


060 | xt[0] = VIEW WIDTH - VIEW WIDTH / 2.0f; 
061 | yt[9] = 9.0f - VIEW WIDTH / 2.0f; 
062 | xt[1] = VIEW WIDTH + fBoundary_t; 

063 | yt[1] = 0.0of + fBoundary_t; 

064 | xt[2] = VIEW_WIDTH + VIEW_HEIGHT / 2.0f; 
065 | yt[2] = 0.0f + VIEW_HEIGHT / 2.0f; 
066 | for (i=0; 1i< 3; i++ ) 并 

067 | xb[i] = xt[i] - VIEW_ WIDTH; 

068 | yb[i] = yt[i] + VIEW WIDTH; 

069 | } 

070 | // 以 下 省 略 


在 上 面 的 程序 中 ， 首 先 以 向 量 形式 作出 了 一 条 直线 ， 并 以 此 直线 为 运动 轨道 ， 


使 沿 斜 45 度 角 切 分 画面 的 分 界线 在 该 轨道 上 运动 。 因 此 作为 轨道 的 直线 ， 也 同 
45 度 角 倾斜 ， 并 且 通 过 点 (VIEW_WIDTH, 0)， 即 画面 的 右上 角 (图 
B27) 


(VIEW WIDTH, 0) 
| 1 作为 轨道 的 直线 


图 5-2-2 ”以 向 量 形式 表示 将 画面 沿 45 度 角 切 分 的 直线 
将 这 条 直线 表示 为 回 量 方程 ， 假 设 扫 道 直 线 上 点 的 位 置 问 量 为 p ， 则 有 


p=at+b (a=(1,1)、 b=(VIEW_WIDTH,0)) 


沿 轨 道 直 线 向 向 量 (-1, 1) 的 方向 ( 即 与 轨道 直线 正 交 ， 且 将 画面 沿 和 斜 45 度 角 切 
分 的 方向 ) 延伸 得 到 的 线 ， 就 是 两 张 背 景 图 片 的 分 界线 (参考 图 5-2-2) 。 接 下 
来 我 们 就 要 考虑 剩 下 的 问题 ， 包 括 这 条 分 界线 沿 轨 道 直线 应 该 有 多 大 的 运动 范 
围 ， 以 及 分 界线 应 该 有 多 长 才能 覆盖 整个 画面 等 。 


。 分 界线 的 运动 范围 
首先 来 考虑 分 界线 的 运动 范围 。 刚 才 得 到 的 轨道 直线 的 向 量 方程 
p=at+b (a=(1,1)、 b=(VIEW_WIDTH,0)) 


中 ， 我 们 已 经 知道 分 界线 延伸 的 方向 ， 就 是 轨道 直线 上 的 一 点 到 向 量 (-1, 1) 
的 方向 。 因 此 当 方程 中 上 为 最 小 值 时 ， 分 界线 正好 通过 画面 左上 角 (参考 图 
5-2-3 左 ) 。 此 时 如 图 所 示 ， 轨 道 直 线 上 点 的 x 坐标 为 VIEW_WIDTH/2 ， 
t=-VIEW_WIDTH/2。 同 理 ， 当 上 为 最 大 值 时 ， 分 界线 正好 通过 画面 右 下 角 

(图 5-2-3 右 ) ， 此 时 轨道 直线 上 点 的 y 坐标 为 VIEW_HEIGHTV2， 
t=VIEW_HEIGHT/2 。 


VIEW_HEIGHT/2 


VIEW_WIDTH/2 
VIEW_WIDTH,/2 


t 取 最 小 值 时 t 取 最 大 值 时 
图 5-2-3 1 的 最 大 值 与 最 小 值 
综 上 可 知 
-VIEW_WIDTH/2 <t < VIEW_HEIGHT/2 
t 为 最 小 值 时 分 界线 通过 画面 左上 角 ，t 为 最 大 值 时 分 界线 通过 画面 右 下 


角 。 因 此 为 了 使 1 的 上 限 及 下 限 部 分 ， 分 别 与 图 片 A 的 边缘 及 图 片 B 的 边 
缘 相 对 应 ， 程 序 中 分 别 对 〇 图 片 A 的 边缘 (t=VIEW_WIDTH/2) 、@) 分 界 


线 (t=fBoundary_t) 、G) 图 片 B 的 边缘 (t=VIEW_HEIGHT/2) 在 直线 上 
的 位 置 坐标 进行 了 计算 ， 如 下 所 示 。 


060 | xt[9 
061 | yt[9 
062 | xt[L 
063 | yt[1 
064 | xt[2 
065 | yt[2 


] = VIEW_WIDTH - VIEW WIDTH / 2.0f; ---] 
] = 0.0f - VIEW WIDTH / 2.0f; ---t--®© 
] = VIEW WIDTH + fBoundary_t; ---] 
] = 0.0f + fBoundary_t; ---L--O 
] = VIEW_WIDTH + VIEW_HEIGHT / 2.0f; ---] 
] = 0.0f + VIEW_HEIGHT / 2.0f; --- 上 --@ 


直线 
分 界线 的 长 度 


请 注意 这 三 个 点 都 位 于 通过 点 (VIEW_WIDTH, 0)、 且 与 向 量 (1 1T) 平行 的 


接 下 来 需要 考虑 分 界线 的 长 度 。 从 最 终 效果 看 ， 我 们 希望 分 界线 无 论 位 于 


什么 位 置 ， 都 可 


以 覆盖 整个 画面 。 为 了 让 算法 更 简单 ， 程 序 中 我 们 并 不 会 


做 一 根 正好 窗 访 


画面 的 分 界线 ， 而 是 会 制作 一 根 比 所 需 长 度 长 很 多 的 分 界 


线 。 在 泻 染 多 边 形 时 ， 超 出 画面 外 的 部 分 会 触发 剪裁 操作 被 剪裁 掉 ， 比 


如 ， 即 便 程 序 中 
也 不 会 发 现 画面 
就 是 画面 长 宽 均 


VIEW_WID 


HH 


指定 在 画面 外 的 某 个 区 域 进行 泻 染 ， ( 除 极 端 情况 之 外 ) 
有 什么 问题 。 因 此 在 Wipe_2_1.cpp 中 ， 分 界线 的 具体 长 度 
为 VIEW_WIDTH 时 分 界线 的 长 度 (参考 图 5-2-4) 


VIEW_WIDTH 


作为 运动 轨道 的 直线 


VIEW_HEIGHT 


图 5-2-4 分 界线 的 长 度 


如 上 图 所 示 ， 此 时 分 界线 的 长 度 ， 等 于 边 长 为 VIEW_WIDTH 的 正方 形 对 
角 线 的 长 度 。 为 了 保证 分 界线 的 长 度 ， 需 要 让 轨道 直线 上 的 点 问 x 方 癌 移 
动 -VIEW_WIDTH， 向 y 方 向 移动 VIEW_WIDTH， 并 将 分 界线 延伸 到 这 里 
(参考 图 5-2-4) 。 让 我 们 来 验证 一 下 。 当 实际 画面 宽 VIEW_WIDTH 为 
640、 画 面 高 VIEW_HEIGHT 为 480 时 ， 画 面 所 需 的 分 界线 确实 比 边 长 为 
VIEW_WIDTH 的 正方 形 的 分 界线 得， 因此 只 需要 保证 这 么 长 的 分 界线 就 可 
以 了 。 上 文中 提 到 的 让 轨道 直线 上 的 点 向 x 方 同 移 动 -VIEW_WIDTH、 回 y 
VIEW_WIDTH， 并 将 分 界线 延伸 到 该 处 这 一 操作 ， 在 程序 中 体现 


for (i= 0; i < 3; I++ 
xb[i] = xt[i] - VIEW_WwIDTH; 
yb[i] = yt[i] + VIEW_WIDTH 


这 样 我 们 就 分 别 对 图 片 A 的 边缘 、 分 界线 、 图 片 B 的 边缘 计算 得 到 了 相应 
的 点 的 坐标 ， 且 为 了 保证 能 履 关 画面， 各 个 点 都 俩 离 (-1, 1) 方向 足够 远 的 
距离 。 接 下 来 就 是 使 用 计算 得 到 的 这 6 个 点 ， 分 别 使 用 两 个 三 角 多 边 形 来 
泻 染 图 片 A 与 图 片 B (参考 图 5-2-5) 。 


三 角 多 边 形 


ee 使 用 计算 得 到 的 6 个 点 ， 分 别 使 用 两 个 三 角 多 边 形 来 泻 染 图 片 A 
B 


类 似 这 样 使 用 和 斜 癌 的 分 界线 切 分 画面 时 ， 使 用 以 向 量 形式 表示 的 直线 的 方 
程式 会 非常 方便 。 本 小 节 上 只 考虑 了 和 斜 45 度 角 ， 不 过 基于 向 量 来 考虑 的 话 ， 
不 仅 限 于 45 度 角 ， 具 有 各 种 角度 的 分 界线 的 画面 切 分 实现 起 来 也 都 比较 简 
单 。 对 此 有 兴趣 的 读者 ， 可 以 目 己 笑 试 实现 以 积累 更 多 经 验 。 


5.3 ”使 用 带 模糊 效果 的 分 界线 进行 画面 切换 
ken Word 


渐变 (gradation) 、Alpha 合成 (Alpha blending) 


RANK/normal 


太 


使 用 两 张 图 片 进 行 画面 切换 时 ， 如 果 分 界线 非常 明显 ， 会 让 过 渡 显 得 生硬 ， 影 
响 整 体 效果 。 对 分 界线 增加 模糊 (也 称 为 渐变 ) 处 理 ， 可 以 让 画面 切换 更 加 平 
滑 ， 本 小 节 就 让 我 们 一 起 来 看 下 突现 这 一 效果 的 方法 。 


本 小 节 将 介绍 使 用 有 模糊 效果 的 分 界线 进行 画面 切换 的 方法 。 


一 
XK 
= 


图 5-3-1 使 用 模糊 的 分 界线 沿 斜 45 度 角 进行 画面 切换 的 程序 


示例 程序 Wipe_3_1.cpp 实现 了 这 一 效果 。 程 序 中 的 大 部 分 与 5.2 万 中 的 示例 程 
序 Wipe_2_1.cpp 一 致 ， 详 细 说 明 请 参考 上 一 节 的 内 容 。 本 小 市 主要 介绍 程序 中 
与 Wipe_2_1.cpp 不 同 的 部 分 。 在 上 一 节 的 Wipe_2_1.cpp 中 ， 画 面 被 分 为 了 两 个 
区 域 ， 即 图 A 区 域 及 图 B 区 域 。 本 小 和 的 Wipe_3_1.cpp 中 则 会 将 画面 分 为 3 个 
区 域 ， 即 图 A 区 域 、 图 A 与 图 B 的 混合 区 域 、 图 B 区 域 (参考 图 5-3-2) 。 


| 


XK 


图 5-3-2 将 画面 分 割 为 3 个 区 域 


和 A 区 域 


< 


图 A 与 图 B 的 混合 区 域 
图 B 区 域 


为 了 将 画面 分 成 3 个 区 域 ， 需 要 有 画面 两 端 及 内 部 的 两 条 分 界线 ， 合 计 4 条 分 
界线 ，Wipe_3_1.cpp 中 对 4 条 分 界线 进行 了 如 下 设 定 。 


A 5-3-1 将 画面 分 成 3 个 区 域 的 4 条 分 界线 的 设 定 (Wipe_3_1.cpp 片 


071 | xt[0] = VIEW WIDTH - VIEW WIDTH / 2.0f - GRAD_WIDTH; 

072 | yt[9] = 0.0f - VIEW_WIDTH / 2.0f - GRAD_WIDTH; 

073 | xt[1] = VIEW WIDTH + fBoundary_t; 

074 | yt[1] = 0.0of + fBoundary_t; = 

075 | xt[2] = VIEW WIDTH + fBoundary_t + GRAD_ WIDTH;---t--©® 

076 | yt[2] = 0,.0f + fBoundary_t + GRAD_WIDTH ; 

077 | xt[3] = VIEW WIDTH + VIEW_HEIGHT / 2.0f + GRAD_WIDTH; 

078 | yt[3] = 09.0f + VIEW_HEIGHT / 2.0f + GRAD_WIDTH; 

在 上 面 的 程序 中 ，Wipe_2_1.cpp 所 没有 的 是 数组 [2] 部 分 (代码 清单 5-3-1 


Q@) 。 相 当 于 我 们 在 原 图 A 与 图 B 的 分 界线 (数组 [1] 的 部 分 ) 的 基础 上 ， 在 


其 向 x 方 向 及 y 方向 同时 偏离 GRAD_WIDTH 的 位 置 ， 新 增 了 一 条 分 界线 。 由 
此 可 得 到 


。 区域 1: 位 于 数组 [0] 与 数组 [1] 之 间 〈 只 泻 染 图 A) 
。 区域 2: 位 于 数组 [1] 与 数组 [2] 之 间 ( 演 染 图 A 与 图 B 的 半 透 明 混 合 
效果 ) 
。 区域 3 位 于 数组 [2] 与 数组 [3] 之 间 〈 只 泻 染 图 B) 
这 样 3 个 不 同 的 区 域 。 请 注意 上 面 控 制 渐变 区 域 宽度 的 GRAD_WIDTH 这 个 常 
数 并 不 是 以 像素 为 单位 的 。 因 为 同时 在 x 方向 及 y 方 向 都 增加 了 
GRAD_WIDTH， 所 以 如 果实 际 渐变 区 域 的 宽度 以 像素 为 单位 ， 则 为 


GRAD_WIDTH 的 V2 倍 ， 不 是 整数 。 另 外 在 上 面 的 程序 中 ， 数 组 [0] 的 分 界线 
的 xy 坐标 同时 间 负 方 同 扩展 了 GRAD_WIDTH 。 


VIEW_WIDTH - VIEW_WIDTH / 2.0f - GRAD_ WIDTH; 
0 .0f - VIEW WIDTH / 2.0f - GRAD_ WIDTH; 


由 于 在 渐变 部 分 完全 超出 画面 外 之 前 分 界线 会 一 直 移 动 〈 即 最 终 画 面 只 保留 一 
张 图 片 ) ， 因 此 这 样 做 才能 确保 在 分 界线 移出 画面 后 渐变 部 分 没有 残留 在 画面 
内 。 数 组 [3] (画面 右 下 的 分 界线 ) 中 也 有 同样 的 处 理 。 


077 | xt[3] 
078 | yt[3] 


VIEW_WIDTH + VIEW_HEIGHT / 2.0f + GRAD_ WIDTH; 
0 .0f + VIEW_HEIGHT / 2.0f + GRAD_WIDTH; 


分 界线 的 xy 坐标 同时 向 正方 向 ( 即 向 画面 外 的 方向 ) 扩展 了 GRAD_WIDTH 。 


程序 接 下 来 进行 了 实际 渲染 ， 初 看 可 能 会 觉得 与 之 前 的 泻 染 方式 不 太一 样 。 通 
党 将 一 个 区 域 分 割 为 3 份 后 ， 泻 染 应 该 按照 以 下 顺序 进行 ， 在 区 域 1 渲染 图 A 
-在 区 域 2 泻 染 图 A 与 图 B 并 进行 半 透 明 渐变 处 理 ~ 在 区 域 3 浑 染 图 B， 总 计 
4 次 泻 染 〈 如 果 是 基于 多 边 形 演 染 则 需要 8 次 ) 。 而 程序 中 实际 只 用 了 3 次 演 染 
(基于 多 边 形 则 为 6 次 ) 。 这 是 为 了 让 2D 演 染 系统 能 够 进行 高 速 泻 染 而 进行 的 
优化 。 因 为 类 似 半 透明 泻 染 这 种 消耗 资源 的 操作 应 该 尽 可 能 地 避免 。 在 进行 半 
透明 泻 染 时 ， 首 先 会 读 取 画面 〈 帧 缓冲 区 ) 中 已经 演 染 过 的 内 容 ， 然 后 对 要 泻 
染 的 区 域 进行 一 些 必要 的 运算 ， 最 后 还 要 将 运算 结果 重新 写 回 到 画面 上 ， 这 样 
的 一 次 半 透 明 泻 染 相 比 普 通 泻 染 ， 至 少 会 多 出 一 次 对 已 有 图 像 数据 的 读 取 操 
作 ， 因 此 应 当 尽 可 能 地 回避 。 


POINT ” 半 透 明 泻 染 会 读 取 帧 缓冲 区 中 已 有 的 内 容 ， 花 费 更 多 运算 时 间 ， 
应 当 以 最 低 限 度 使 用 。 


在 区 域 2， 即 对 图 片 A 与 图 片 B 进行 半 透 1 其 实 不 需要 对 图 A 与 
图 B 都 进行 半 透 明 泻 染 。 只 需要 对 图 A 进行 普 并 在 泻 染 图 B 时 对 其 进 
行 一 次 Alpha 合成 ， 就 能 很 好 地 实现 图 A 与 图 人 合 效 果 。 如 果 更 进 
一 步 来 考虑 ， 对 于 区 域 2 中 泻 染 的 图 A， 以 及 区 域 1 中 演 染 的 图 A， 就 没有 必 
要 分 别处 理 。 因 为 区 域 1 与 区 域 2 本 来 束 是 相连 的 ， 图 A 又 位 于 两 个 区 域 中 ， 
那么 将 两 个 区 域 连 起 来 对 图 A 进行 1 次 渲染 ， 就 可 以 有 效 减 少 1 次 泻 染 指令 。 
虽然 这 样 的 优化 可 E 微 不 足 道 ， 但 是 只 有 坚 寺 这 种 理念 ， 才能 让 大 型 系统 也 保 
持 超 速 通畅 。 也 就 是 说 ，Wipe_3_1.cpp 最 终 是 由 以 下 步骤 组 成 的 。 


@ 将 区 域 1 与 区 域 2 整合 为 一 个 区 域 ， 对 图 A 进行 普通 泻 染 
@ 在 区 域 3 中 对 图 B 进行 普通 泻 染 
@ 在 区 域 2 中 对 图 B 进行 半 透 明 演 染 
通过 总 计 3 个 步骤 完成 了 整个 演 染 过 程 (图 5-3-3) 。 当 然 以 上 都 是 以 2D 演 染 
系统 为 前 提 而 使 用 的 优化 手段 ， 如 采 是 以 3D 为 主 的 系统 ， 通 过 使 用 多 重 纹理 混 


合 (multiple texture) 技术 ， 也 可 以 高 速 地 得 到 同样 的 泻 染 结果 。 具 有 3D 系统 
相关 知识 的 朋友 ， 可 以 自己 尝试 使 用 多 重 纹理 混合 实现 上 面 的 泻 染 过 程 。 


\ @ 泻 染 图 B 


DC QD 泻 染 图 A 


二 本 


图 5-3-3 ” 演 染 的 3 个 步骤 
5.4 使 用 圆 形 进行 画面 切换 


og m | RANK/hard 
避免 重复 演 染 、 环形 “a 值 /har 


A 


用 于 画面 切换 的 分 界线 ， 并 不 是 只 有 直线 。 在 动画 作品 中 经 常 能 看 到 使 用 圆 形 
作为 分 界线 进行 画面 切换 。 在 本 小 节 ， 我 们 就 来 学 习 这 种 效果 的 实现 。 


本 小 市 将 介绍 使 用 圆 形 作 为 分 界线 进行 画面 切换 。 


图 5-4-1 使 用 圆 形 分 界线 进行 画面 切换 的 程序 
示例 程序 Wipe_4_1.cpp 实现 了 圆 形 的 画面 切换 效 末 。 程 序 中 的 主要 部 分 如 下 所 


修 ° 


Oh 5-4-1 ”使 用 圆 形 分 界线 进行 画面 切换 的 主要 程序 (Wipe_4_1.cpp 片 


Fp 


nt InitChangingPictures( void ) 


fBoundary_r1i 
fBoundary_r2 


VIEW_HEIGHT ) / 2.0f; 


054 
055 
056 
057 
058 
059 
060 
061 
062 
063 
064 
065 
067 


{ 


MIN_R， 


// 只 在 初始 化 时 调用 一 次 
// ri 的 初始 值 


sqrtf( VIEW WIDTH * VIEW_WIDTH + VIEW_HEIGHT * 


// r2 的 初始 值 


fBoundary_v = 5.0f,; 


return 0O; 


int 

float 
float 
float 


int DrawChangingPictures( void ) 


i; 
fAngle1, fAngle2; 
fAngleDelta,; 
xt[4], yt[4]; 


fBoundary_r1i += fBoundary_v; 


// 分 界线 移动 速度 


// 每 帧 调用 一 次 


// 上 边 直 线 上 的 点 
// 移动 分 界线 


068 
069 
070 
071 
072 
073 
074 
075 
076 
077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 
088 


if ( fBoundary_r1i < MIN R ) { 
fBoundary_r1 = MIN_R; 
fBoundary_v = -fBoundary_v; 


} 
if ( fBoundary_r1 > fBoundary_r2 ) { 


fBoundary_r1 = fBoundary_r2; 
fBoundary_v = -fBoundary_v; 


// 最 小 


= 


// 到 


fAngleDelta = 2.0f * PI / DIVIDE_NUM; 


| 

| 

| 

| 

| 

| 

| 

| 

| fAngle1 = 
| fAngle2 = 
| for ( i= 
| xt[0] 
| yt[9] 
| xt[1] 
| yt[1] 
| xt[2] 
| yt[2] 
| xt[3] 
| yt[3] 
| 略 


AN 


// 以 下 


5 4 
fAngleDelta,; 
90; 
VIEW_WIDTH 
VIEW_HEIGHT 
VIEW_WIDTH 
VIEW_HEIGHT 
VIEW_WIDTH 
VIEW_HEIGHT 
VIEW_WIDTH 
VIEW_HEIGHT 


/ 


/ 
/ 
/ 
/ 
/ 
y 
/ 


i < DIVIDE_ NUM; i++ 


.Of 
.Of 
.Of 
.Of 
.Of 
.Of 
.Of 
.Of 


DNDNNNNDNDNND 
二 十 十 十 十 十 十 十 


) 攻 
fBoundary_r1 


fBoundary_r1 
fBoundary_r1 
fBoundary_r1 
fBoundary_r2 
fBoundary_r2 
fBoundary_r2 
fBoundary_r2 


大 


画 


a 


cosf( 
sinf( 
cosf( 
sinf( 
cosf( 
sinf( 
cosf( 
sinf( 


* XX XX XX XX * * 亲 


fAngle1 
fAngle1 
fAngle2 
fAngle2 
fAngle1 
fAngle1 
fAngle2 
fAngle2 


~ 


———————— 


程序 


中 使 用 正弦 、 余 弦 制 作 了 以 画面 


正中 央 (VIEW_WIDTH/2， 


VIEW_HEIGHT/2) 为 圆心 的 两 个 圆 。 


的 半径 为 fBoundary_r2。 运 行 Wipe_4_1.cpp 就 可 以 看 到 ， 以 画面 


圆 会 目 
只 有 一 条 ， 程 序 中 为 什么 要 创建 出 两 个 不 同 
张 图 片 被 重复 泻 染 。 假 设 画 面 
果 人 允许 两 张 图 片 重复 渔 染 ， 
围 内 泻 染 图 A 就 可 以 得 到 正确 
泻 染 图 A 与 图 B， 特 别 是 当 图 A 几乎 覆 


个 加 


的 半径 为 也 oundary_r1， 另 一 个 圆 


中 心 为 圆心 的 


正中 央 的 图 片 为 图 A 


己 放大 缩小 ， 并 作为 分 界线 切换 了 两 张 图 片 的 显示 。 圆 形 的 分 界线 明明 
径 的 圆 呢 ? 其 实 这 是 为 了 避免 两 


甘 


外 上 


了 TCR 


站 的 图 片 为 图 B， 如 


结 


那么 只 要 在 整 画 


而 范 上 


大 ， 从 而 造成 大 量 的 运算 被 白白 浪费 。 


圆 1 


EA 


( 半 


[二 


。 图 A 只 在 


3 


。 图 B 只 在 圆 


这 样 就 避免 了 图 片 的 重复 泻 染 。 


POINT 重复 演 染 T 
一 个 履 盖 整个 画 
问题 。 

在 上 述 情 况 下 ， 外 侧 的 圆 2 的 


对 圆 2 进行 普通 演 染 ， 由 于 超出 画面 


径 为 fBoundary_r1) 与 圆 2 ( 
1 的 区 域 中 演 染 
1 与 圆 2 之 间 的 环形 区 域内 演 染 


y 


EN 


I 


整个 画面 


有 内 渔 染 图 B， 然 后 在 圆 形 范 


宋 。 但 是 这 样 一 来 泻 染 图 A 的 区 域 一 定 会 重复 
时 ， 重 复 演 染 的 面 


积 将 3 


FE 党 


LF 径 就 至 少 要 保证 回 能 履 
的 部 分 会 被 剪裁 掉 ， 因 此 圆 的 


将 整个 画面 


其 中 


YA 


O 


因此 Wipe_4_1.cpp 中 准备 了 半径 不 同 的 
EF 径 为 fBoundary_r2) ， 其 


bs 


押 积 很 大 时 会 造成 运算 的 严重 浪费 ， 为 此 准备 两 个 圆 ， 
重 染 其 他 图 片 ， 就 可 以 避免 重复 演 染 的 


此 时 如 果 


径 不 需要 


正好 覆盖 画面 ， 比 这 再 大 一 些 也 没什么 问题 (但 也 不 能 无 限制 的 大 ， 过 大 的 数 
字 运 算 会 产生 计算 误差 ， 可 能 让 画面 出 现 奇怪 的 问题 。 在 上 例 中 ， 为 了 使 当 
圆 1 与 圆 2 一 致 时 ， 正 好 只 有 图 A 可 以 履 盖 整个 画面 ， 将 圆 2 的 半径 设置 为 了 
勉强 可 以 获 盖 整个 画面 。 所 谓 勉强 可 以 履 盖 整个 画面 的 半径 ， 就 是 从 画面 正中 
央 的 坐标 ， 到 画面 四 个 角 中 的 一 个 角 的 距离 。 使 用 勾 股 定理 可 以 求 得 这 一 距 
离 ， 程 序 中 计算 圆 2 的 半径 的 是 InitChangingPicture 函数 内 的 


法 


053 | fBoundary_r2 = sqrtf( VIEW WIDTH * VIEW WIDTH + VIEW HEIGHT * 
VIEW_HEIGHT ) / 2.0f; // r2 的 初始 值 


这 一 部 分 。 很 容易 可 以 看 出 ， 画 面 正中 央 到 任意 一 角 的 距离 ， 等 于 画面 对 角 线 
长 的 一 半 (参考 图 5-4-2) 。 


flyouridary 7 


图 5-4-2 ”使 用 勾 股 定理 计算 画面 正中 央 到 一 角 的 距离 
。 使 用 带 模糊 效果 的 圆 形 分 界线 进行 画面 切换 


接 下 来 将 介绍 分 界线 为 圆 形 ， 并 且 分 界线 市 有 模糊 效果 的 画面 切换 。 示 例 
程序 Wipe_4_1a.cpp 实现 了 这 一 效果 。 由 于 程序 源 代码 很 长 ， 这 里 就 不 再 
接 引 用 代码 ， 仅 就 代码 中 使 用 的 算法 进行 说 明 ( 源 代码 下 载 地 址 可 以 参考 
文 前 的 “关于 本 书 ”) 。 


这 个 程序 略 显 复杂 主要 还 是 因为 程序 中 存在 很 多 条 件 分 文 。 关 于 和 斜 向 模糊 
的 分 弄 线 的 实现 ， 我 们 在 前 一 小 节 中 已 笃 进 行 过 说 明 即 需 要 准备 4 条 分 
界线 ， 并 分 别 演 染 图 A 区 域 、 图 A 与 图 B 的 混合 区 域 、 图 B 区 域 总 计 3 个 


吓 


区 域 。 其 实 当 分 界线 为 圆 形 时 ， 也 可 以 采用 同样 的 思路 ， 将 画面 分 为 3 个 
区 域 分 别 泻 染 ， 但 有 所 不 同 的 是 ， 只 渲染 图 A 的 区 域 (不 管 是 画面 内 还 是 
画面 外 ) 并 不 是 一 定 存在 的 。 运 行 Wipe_4_1.cpp 可 以 看 到 ， 首 先 图 A 与 图 
B 的 混合 区 域 会 出 现在 画面 正中 央 ， 当 该 区 域 的 半径 超过 渐变 区 域 的 宽度 
时 ， 只 泻 染 图 A 的 区 域 才 会 出 现 。 也 就 是 说 ， 根 据 泻 染 图 A 的 区 域 存在 与 
否 ， 整 体 泻 染 策略 会 有 所 不 同 。 具 体 来 说 ， 只 渲染 图 A 的 区 域 不 存在 时 ， 
当然 就 没有 必要 演 染 图 A， 此 时 图 A 与 图 B 的 混合 区 域 为 圆 形 ， 男 一 方 
面 ， 如 采 存 在 只 泻 染 图 A 的 区 域 ， 则 程序 需要 演 染 图 A， 此 时 泻 染 图 A 的 
区 域 为 圆 形 ， 而 泻 染 图 A 与 图 B 的 混合 区 域 就 会 变 为 环形 (图 5-4-3) 


De dd 


`、、/ 图 A 与 图 B 的 混合 区 域 全 


图 5-4-3 ” 演 染 的 区 域 和 内 容 


可 以 确定 的 是 无 论 上 述 哪 种 情况 ， 只 演 染 图 B 的 区 域 都 为 环形 (只 是 外 侧 
的 圆 在 画面 外 ) 。 由 于 只 洽 染 图 A 的 区 域 存在 与 否 对 处 理 方式 有 较 大 影 
响 ， 因 此 在 Wipe_4_1a.cpp 中 ,准备 了 3 个 半径 fBoundary_r1、 
fBoundary_r2、fBoundary_r3， 具 体 作 用 如 下 。 


o。 fBoundary_r1 : 只 泻 染 图 A 的 区 域 与 图 A 图 B 混合 区 域 的 分 界线 


的 半径 


o I2: 图 A 图 B 混 合 区 域 与 只 泻 染 图 B 的 区 域 的 分 界线 
半 和 


o 侣 oundary_r3 : 只 泻 染 图 B 的 区 域 的 外 侧 的 分 界线 的 半径 ( 定 值 ) 


这 里 需要 注意 的 是 ，fBoundary_r1 在 只 演 染 图 A 的 区 域 不 存在 时 是 没有 意 
义 的 。 同时 从 数值 来 看 ， 侣 oundary_rl 应 当 始 终 比 fBoundary_r2 的 值 小 
GRAD_WIDTH 〈 即 渐变 区 域 的 宽度 ) 。 而 由 于 fBoundary_r2 是 从 0 开始 变 
化 的 ， 因 此 fBoundary_r1 可 能 取 负 值 ( 当 fBoundary ?2 为 0 时 
fBoundary_r1 为 -GRAD_WIDTH) 。 当 然 半 径 为 负 值 的 0 要 ] 和 存在 
的 ， {Boundary 11 . 为 负 值 ， 人 人 演 染 图 A 的 区 域 不 存在 。 因 此 检查 只 
渲染 图 A 的 区 域 是 否 存 在 ， 只 需要 在 让 语句 中 判断 名 oundary_rl 的 值 就 可 
以 了 。 但 是 最 终 的 判断 条 < 件 并 不 是 oe rl 是 否 为 负 ， 因 为 即使 
fBoundary_rl 不 为 负 值 ， 如 果 半 径 小 于 1， 也 会 因 泻 梁 区 域 过 小 而 认为 泻 染 染 
区 域 不 存在 。 


只 演 染 图 A 的 区 域 不 存在 时 的 处 理 


上 面 介绍 了 Wipe_4_1a.cpp 的 思路 ， 但 是 还 遗留 了 一 个 很 大 的 问题 。 那 就 是 
在 只 党 图 A 的 区 域 不 存在 的 情况 下 ， 泻 染 图 A 与 图 B 的 混合 区 域 寺 ， 图 
A 与 图 B 的 混合 比率 应 该 设 定 为 多 少 的 问题 。 比 如 当 fBoundary_r2 接近 于 
0 时， 也 就 是 图 A (以 半 透 明 形 式 ) 刚刚 开始 显示 时 ， 即 使 是 图 A 与 图 B 
的 混合 区 域 的 中 心 部 分 ， 也 只 会 对 图 A 做 最 小 限度 的 泻 染 。 当 图 A 与 图 B 
的 混合 区 域 半径 逐渐 增 大 到 接近 渐变 区 域 的 宽度 时 ， 中 心 部 分 中 图 A 的 泻 
染 程 度 就 很 高 了 。 而 当 半 径 超 过 渐变 区 域 的 宽度 时 ， 中 心 部 分 将 只 泻 淋 图 
A。 在 前 一 小 节 中 ， 我 们 分 别 准备 了 只 泻 染 图 A 的 点 与 只 泻 染 图 B 的/ 点 ， 
然后 通过 分 别 移动 这 些 点 (不 包括 在 画面 外 的 移动 ) 实现 了 混合 区 域 的 移 
动 ， 但 是 这 样 的 处 理 不 适用 于 现在 的 情况 ， 因 为 当 只 泻 染 图 A 的 区 域 不 存 
在 时 ， 还 需要 对 画面 正中 央 的 点 的 透明 度 进 行 适 当 的 控制 。 执 行 半 透 明 控 
制 的 代码 是 Wipe_4_1a.cpp 的 以 下 部 分 。 


代码 清单 5-4-2 ”控制 透明 度 演 染 的 部 分 (Wipe_4_1a.cpp 片段 ) 


137 | nCenterColor = ( ( int )( fBoundary_r2 * 255 / 
GRAD_WIDTH ) << 24 ) + QOxffffff; 


这 行 代码 对 画面 正中 央 的 点 的 颜色 (a 值 = 包含 透明 度 的 数值 ) 进行 了 设 
置 。 首 先 正 中 央 的 颜色 (不 含 a 值 ) 为 0xffffff， 这 表示 R=255、G=255、 
B=255，RGB 都 为 最 大 亮度 ， 即 白色 。w 值 通过 


( fBoundary_r2 * 255 / GRAD_WIDTH ) 


计算 得 到 ，w 值 与 颜色 值 一 样 ， 也 是 一 个 0~255 的 数值 ， 为 0 时 表示 完全 
透明 ， 为 255 时 表示 完全 不 透明 。 在 上 面 的 等 式 中 ， 


o 当 fBoundary_ r2 为 0 时 ,a 值 也 为 0 


o 当 fBoundary_r2 为 GRAD_WIDTH， 即 与 渐变 区 域 相等 时 ，a 值 为 
255 


相当 于 对 a 值 始终 乘 以 一 个 变化 的 系数 。 如 果 对 此 不 太 理 解 ， 可 以 将 程序 

中 的 色 oundary_r2 设置 为 GRAD_WIDTH， 来 验证 一 下 此 时 的 w 值 是 否 为 

255。 总 之 通过 这 种 方式 ， 束 实现 了 fBoundary_r2 为 0 时 画面 正中 的 图 A 完 
全 透明 ， 侣 oundary_r2 等 于 渐变 区 域 宽度 时 ， 画 面 正 中 的 图 A 完全 不 透明 
( 即 只 泻 染 图 A) 这 一 效果 。 


本 小 节 实 现 了 新 的 画面 切换 效果 ， 让 图 片 的 起 始 位 置 不 再 只 限于 画面 边 


缘 ， 但 是 这 就 需要 对 分 界线 做 很 多 特殊 处 理 。 对 此 感 兴趣 的 朋友 ， 还 可 以 
挑战 其 他 更 多 有 趣 的 画面 切换 方式 。 


5.5 “雨刷 式 画 面 切 换 


ken Word 
避免 条 件 分 支 RANK/hard 


在 本 小 节 ， 我 们 将 学 习 以 一 点 为 中 心 ， 旋 转 分 界线 实现 的 画面 切换 。 
we 为 中 心 ， 以 一 条 旋转 的 直线 为 分 界线 的 画面 切换 效 


示例 程序 Wipe_5_1.cpp 实 现 了 雨刷 式 画 面 切换 效果 。 程 序 中 重要 的 部 分 是 
DrawChangingPictures 函数 的 以 下 内 容 。 


代码 清单 5-5-1 ”以 画面 一 角 为 中 心 旋转 分 界线 进行 画面 切换 的 程序 的 主要 部 分 
(Wipe_5_1.cpp 片 段 ) 


072 | 

073 | yt = VIEW_HEIGHT + DRAW_R * sinf( 3.0f * PI / 2.0f - fAnglel ); 
074 | Draw2DPolygon( VIEW WIDTH, VIEW_HEIGHT, 1.0f, 1.0f, 

075 | xt, yt, xt / VIEW WIDTH, yt / VIEW_HEIGHT， 

076 | -VIEW_HEIGHT, VIEW_ HEIGHT, -( float ) VIEW_HEIGHT 
/ VIEW_WIDTH, 1.0f, 

077 | &d_tPic1 ); 

078 | Draw2DPolygon( VIEW WIDTH, VIEW_HEIGHT, 1.0f, 1.0f, 

079 | VIEW_WIDTH， -VIEW_ WIDTH, 1.0f, -( float ) 

VIEW WIDTH / VIEW_HEIGHT, 

080 | xt, yt, xt / VIEW WIDTH, yt / VIEW_HEIGHT, 

081 | &d_tPic2 ); 


xt = VIEW WIDTH + DRAW_R * cosf( 3.0f * PI / 2.0f - fAngle1 ); 


为 了 制作 一 条 通过 画面 右 下 角 并 且 可 以 旋转 的 分 界线 ， 首 先 需 要 准备 一 个 以 画 
面 右 下 角 (VIEW_WIDTH, VIEW_HEIGHT) 为 中 心 进行 圆周 运动 的 点 ， 这 一 点 
可 以 通过 以 下 方式 制作 。 


VIEW WIDTH + DRAW R * cosf( 3.0f * PI / 2.0f - fAnglel ); 
VIEW_HEIGHT + DRAW R * sinf( 3.0f * PI / 2.0f - fAnglel ); 


以 画面 右 下 角 为 中 心 时 ， 画 面 将 在 中 心 点 的 左上 方 ， (xt ,yt ) 与 


画面 右 下 角 连 接 而 成 的 分 界线 ， 在 什么 样 的 角度 范围 内 能 通 过 画面 呢 ? 在 上 例 


中 ， 由 于 计算 机 画面 中 以 y 轴 下 方 为 正 ， 因 此 当 和 角度 在 x ~ 27 的 范围 内 时 ， 分 
界线 通过 画面 (图 5-5-2) 。 


图 5-5-2 通过 画面 的 分 界线 

在 上 面 的 两 行程 序 中 ， 传 入 正弦 余弦 函数 的 角度 为 (3.0f * PI/2.0f-fAnglel ) 整 
是 出 于 这 个 原因 。 让 等 式 中 的 fAnglel 在 0~ 2 的 范围 内 变化 ， 那 么 传 入 正弦 余 

弦 的 人 的 范围 就 等 于 x ~ 3x ， 并 且 当 fAnglel 为 0 时 ， 传 入 正弦 余弦 的 角度 


27 ， 即 分 界线 正好 与 画面 右 端 重合 (图 5-5-2) 。 这 样 很 容易 就 实现 了 分 界线 从 
画面 右 端 开始 旋转 着 出 现 的 效 末 。 


接 下 来 要 计 呈 分 克 线 万 需 罗 长 度 ， 稍微 有 点 复杂 。 如 有 条 只 考虑 分 界线 ， 那 么 为 
了 使 分 界线 始终 罕 过 画面 ， 只 要 让 分 界线 等 于 画面 对 角 线 长 就 足够 了 。 但 是 如 
果 我 们 需要 根据 分 界线 及 画面 边线 使 用 三 角 多 边 形 对 图 A 与 图 B 进行 演 染 
条 件 分 支 束 会 变 得 有 些 复 杂 。 


分 界线 在 画面 左上 角 下 方 时 


分 界线 在 画面 左上 角 上 方 时 


图 5-5-3 分 界线 在 画面 左上 角 下 方 ( 左 图 ) 及 下 方 ( 右 图 ) 时 


具体 来 说 ， 如 图 5-5-3 左 所 示 ， 当 分 界线 在 画 


则 左上 和 角 下 方 时 ， 图 上 的 区 域 A 


为 三 角形 ， 区 域 B 为 四 角形 。 如 图 5-5-3 右 所 示 ， 当 分 界线 在 画面 左上 角 上 方 
时 ， 图 上 的 区 域 A 为 四 角形 ， 区 域 B 为 三 
时 ， 区 域 A 区 域 B 均 为 三 角形 。 由 于 大 部 分 系统 中 多 边 形 只 能 为 三 角形 ， 因 此 


就 不 得 不 将 四 角形 的 区 域 再 分 割 为 两 个 三 角形 。 


文公 来 究竟 每 个 区 域 要 演 染 


多 少 个 多 边 形 呢 ?就 需要 根据 情况 分 别处 理 ， 程 序 也 会 变 得 复杂 。 


对 此 ，Wipe_5_1.cpp 中 并 没有 采用 条 件 分 文 的 
上 做 文章 ， 最 终 让 每 个 区 域 具 需要 演 染 一 个 三 


先 ， 当 分 界线 与 画面 右 端 重合 时 ， 演 染 狗 A 的 三 角 多 边 形 将 履 蓄 整个 画面 


分 界线 与 画面 下 端 重合 时 ， 则 由 泻 染 图 B 的 三 
外 的 情况 ， 即 分 界线 位 于 中 间 时 ， 就 必须 由 图 
边 形 共同 黎 兰 整个 画面 。 按 照 这 样 的 思路 处 理 ， 
点 的 位 置 加 可 以 了 。 


处 理 方式 ， 而 是 在 多 边 形 的 大 小 
角 多 边 形 。 和 


角 多 边 形 履 凑 整 个 画面 。 除 此 以 
A 的 三 角 多 边 形 与 图 B 的 三 角 多 
我 们 就 只 需要 知道 多 边 形 各 顶 


首先 从 图 A 开始 考虑 。 由 于 图 A 在 分 界线 的 下 方 泻 染 ， 因 此 就 要 在 分 界线 与 画 


面 下 边线 之 间 的 区 域 进行 泻 染 。 这 时 即使 分 界 
也 必须 能 覆盖 整个 画面 ， 为 了 实现 这 一 点 ， 最 
为 45 度 角 (图 5-5-4) 。 


线 与 画面 右 端 一 致 ， 三 角 多 边 形 
简单 的 方式 就 是 让 多 过 形 的 全 


VIEW_WIDTH 


VIEW _HEIGHT VIEW _HEIGHT 


VIEW HEIGHT VIEW WIDTH 
图 5-5-4 多边 形 的 斜 边 为 45 度 角 


此 时 ， 为 了 使 45 度 角 的 斜 边 正好 通过 画面 左上 角 ， 就 需要 分 界线 的 长 为 
VIEW_WIDTH + VIEW_HEIGHT， 分 界线 的 一 个 端点 在 画面 下 端 ， 且 其 x 坐标 
为 -VIEW_HEIGHT。 也 就 是 说 ， 党 名 图 入 所 需 的 二 角 多 边 形 的 顶 ， 点 为 : 
(VIEW_WIDTH, VIEW_HEIGHT), 即 画 面 右 下 角 ; (-VIEW_HEIGHT, 
VIEW_HEIGHT)， 即 画面 下 端的 分 界线 的 一 个 端点 。 剩 下 的 一 个 顶点 就 是 图 A 
与 图 B 之 间 的 分 界线 的 另 一 个 端点 ， 位 于 以 画面 右 下 角 为 圆心 、 半 径 为 
VIEW_WIDTH + VIEW_HEIGHT 的 圆周 上 。 该 点 在 程序 中 为 (xt , yt )， 可 对 应 
到 下 面 的 代码 。 


074 Draw2DPolygon( VIEW WIDTH, VIEW_HEIGHT, 1.0f, 1.0f, 

075 xt, yt, xt / VIEW WIDTH, yt / VIEW_HEIGHT, 

976 | -VIEW_HEIGHT, VIEW_HEIGHT, -( float ) VIEW_HEIGHT 
/ VIEW_WIDTH, 1.0f, 


077 | &d_tPic1l1 ); 


接 下 来 考虑 图 B 的 情况 。 图 B 于 分 二 人， 0 画面 右 端 


画面 ， 同 样 需要 和 斜 边 为 45 度 角 ， 并 且 和 斜 边 会 通过 画面 左上 角 ， 因 此 分 界线 长 度 
与 图 A 的 情况 一 致 ， 为 VIEW_WIDTH + VIEW_HEIGHT， 分 界 线 在 于 画面 右 端的 
端点 的 y 坐标 为 -VIEW_WIDTH (图 5-5-4) 。 也 就 是 说 三 角 多 边 形 的 顶点 分 别 


为 : 画面 右 下 角 (VIEW_WIDTH, VIEW_HEFIGHT)、 画 面 右边 线 上 分 界线 的 端点 
(VIEW_WIDTH, -VIEW_WIDTH)， 以 及 图 A 与 图 B 间 的 分 界线 的 另 一 个 端 


点 。 对 应 下 面 的 代码 。 


078 | Draw2DPolygon( VIEW WIDTH, VIEW_HEIGHT, 1.0f, 1.0f, 

079 | VIEW_WIDTH， -VIEW WIDTH, 1.0f, -( float ) 
VIEW WIDTH / VIEW_HEIGHT 

080 | xt, yt, xt / VIEW_ WIDTH, yt / VIEW_HEIGHT, 
081 | &d_tPic2 ); 


。 使 用 带 渐变 效果 的 分 界线 进行 画面 切换 


接 下 来 让 我 们 对 这 个 类 似 雨 刷 的 分 界线 加 上 有 透明 度 的 渐变 效果 。 示 例 程 
序 Wipe_5_1a.cpp 实现 了 这 一 效果 。 与 Wipe_5_1.cpp 相 比 ，Wipe_5_1a.cpp 
无 疑 更 加 复 洒 ， 代 码 行 数 也 增加 了 不 少 ， 因 此 本 文中 不 再 引用 代码 ， 仅 对 
实现 的 原理 进行 一 些 说 明 ( 源 代码 下 载 地 址 请 参考 文 前 的 “关于 本 书 ”) 。 
上 面 我 们 已 经 实现 了 使 分 界线 像 雨 刷 一 样 动作 ， 为 了 让 分 界线 还 能 有 产 变 
效果 ， 需 要 注意 以 下 两 个 关键 点 。 


@ 如 何 实现 当 分 界线 的 角度 改变 时 渐变 区 域 的 宽度 也 是 固定 的 。 
@ 分 界线 旋转 的 轴 心 位 置 。 


先 来 看 如 何 固定 渐变 区 域 的 宽度 这 一 点 。 在 4.2 节 中 ， 我 们 实现 了 无 论 光 
线 投射 问 任 何 角 度 ， 其 宽度 都 是 固定 的 ， 而 本 小 市 就 可 以 采用 同样 的 处 理 
方法 。 即 作 一 条 与 分 界线 正 交 的 向 量 (vsx, vsy)， 然 后 对 其 加 减 分 界线 两 端 
的 位 置 向 量 ， 进而 得 到 固定 宽度 的 分 界线 (参考 图 4-2-2) 。 但 是 是 与 光线 处 


理 不 同 的 是 ， 分 界线 的 角度 是 已 知 的 ， 因 此 只 需要 对 分 界线 的 角度 减 去 2 
， 就 可 以 得 到 与 分 界线 重 直 的 向 量 。 


关于 旋转 的 轴 心 位 置 ， 则 需要 好 好 考虑 一 下 。 当 分 界线 没有 渐变 效果 时 ， 
将 轴 心 位 置 放 在 画面 石 下 角 征 没有 问题 的 。 但 是 当 分 界线 携 市 了 一 定 宽度 
的 渐变 区 域 后 ， 如 有 果 仍 然 将 轴 心 设置 在 画面 右 下 角 ， 那 么 当 分 界线 位 于 初 
始 状态 ， 比 如 垂直 或 水 平时 ， 就 会 有 一 半 渐 变 区 域 遗留 在 画面 内 ， 之 后 无 
论 分 界线 以 何 种 角度 运动 ， 渐 变 区 域 也 无 法 从 画面 中 移 除 (图 5-5-5) 。 


a 


渐变 区 域 


有 一 半 得 留 
在 画面 内 


图 5-5-5 ”渐变 区 域 的 一 半 遗 留 在 画面 中 无 法 移 除 
要 解决 这 个 问题 ， 需 要 让 分 界线 在 水 平 或 垂直 状态 时 ， 渐 变 区 域 完全 位 于 


画面 之 外 。 为 此 应 当 在 画面 右 下 角 的 基础 上 ， 同 时 疝 右 方 及 下 方 移动 渐变 
区 域 宽 度 的 一 半 ， 以 这 个 画面 外 的 点 作为 分 界线 旋转 的 轴 心 (图 5-5-6) 。 


渐变 区 域 


完全 位 于 
画面 外 


图 5-5-6 设置 轴 心 位 置 以 保证 渐变 区 域 完全 位 于 画面 之 外 


因此 Wipe_5_1a.cpp 中 将 分 界线 旋转 的 轴 心 位 置 设置 为 了 (VIEW_WIDTH + 
GRAD_WIDTH/2, VIEW_HEIGHT + GRAD_WIDTH/2)。 由 于 现在 分 界线 自 
身 有 宽度 ， 因 此 多 边 形 顶点 不 能 直接 放 在 分 界线 的 轴 心 位 置 上 。 分 界线 的 
旋转 轴 心 ， 也 就 是 分 界线 两 个 端点 中 的 一 个 ， 将 其 坐标 加 减 与 分 界线 正 交 
的 癌 量 的 坐标 (vsx, vsy)， 就 得 到 了 多 边 形 的 顺 点 坐标 。 


还 有 一 些 细 市 需要 注意 ， 因 为 渐变 区 域 的 宽度 问题 需要 将 分 界线 的 轴 心 放 
在 画面 外 ， 此 时 也 需要 对 分 界线 的 长 度 相应 地 做 一 些 延 长 ， 否 则 无 论 图 A 
还 是 图 B， 都 无 法 只 用 一 个 多 边 形 泻 染 覆盖 整个 画面 。 在 Wipe_5_1a.cpp 
中 ， 多 边 形 的 顶点 超出 画面 的 长 度 正好 等 于 渐变 区 域 的 宽度 ， 所 以 只 需要 
ee 变 区 域 宽度 的 一 倍 ， 怠 可 以 保证 三 角 多 边 形 覆盖 整个 画 
[ [e] 


5.6 [ 进 阶 ] 多 种 多 样 的 画面 切换 方法 


Ken Word 
个 本 遮 章 图 案 、 可 编程 着 色 器 (programmable shader) 、 高 斯 滤 


波 器 (gaussian filter) RANK/very hard 


| 我 们 将 结合 实际 应 用 的 例子 ， 对 更 复杂 的 画面 切换 方法 进行 一 些 


本 小 市 将 对 游戏 中 经 第 使 用 的 ， 以 及 过 去 比较 流行 的 画面 切换 效果 进行 一 些 介 
绍 。 在 游戏 中 ， 场 景 更 改 时 往往 伴随 看 画面 切换 效果 ， 比 如 从 标题 画面 进入 游 
戏 画 面 时 ， 以 及 RPG 游戏 中 遭遇 敌人 ( 踩 地 雷 式 ) 时 等 。 时 至 2013 年 ， 电 脑 
游戏 已 经 发 展 了 50 多 年 ， 画 面 切 换 始 终 伴随 着 电子 游戏 的 发 展 而 进行 着 各 种 笑 
试 ， 现 在 的 画面 切换 效果 种 类 党 多 ， 有 各 种 各 样 的 实现 方法 。 


在 电脑 游戏 发 展 初 期 ， 人 硬件 制约 异常 站 重 ， 能 实现 的 画面 切换 效果 并 不 多 。 比 

如 本 书 中 介绍 的 以 角色 为 单位 ， 只 更 新 画面 一 部 分 的 方法 。 再 比如 由 于 当时 无 

法 更 改 颜色 的 亮度 ， 因 此 就 通过 将 比较 亮 的 颜色 按 顺 序 切 换 到 比较 暗 的 颜色 
(如 白 ~ 黄 -~ 紫红 -~ 蓝 等 ) ， 来 模拟 类 似 颜色 淡出 的 效果 《画面 由 亮 慢 慢 变 


暗 ) 。 后 来 计算 机 的 性 能 略 有 提升 ， 开 始 可 以 通过 控制 图 片 来 完成 一 些 新 的 效 
果 ， 比 如 旧 的 画面 卷 动 到 画面 外 后 ， 新 的 画面 再 卷 动 进入 画面 的 效果 。 男 外 人 氨 
第 图 案 (mask pattern) 也 比较 常用 ， 即 先 准备 好 一 个 像素 单位 的 图 案 来 控制 像 
素 内 是 否 对 图 片 进 行 泻 染 ， SF I ss 


以 模拟 出 类 似 淡出 / 淡 入 的 效果 了 (图 5-6-1) 
在 那个 时 代 ， 所 有 的 画面 切换 效果 的 制作 ， 只 要 懂得 一 定 的 编程 知识 就 都 不 会 


图 5-6-1 ”使 用 遮 罩 图 案 的 画面 切换 效果 

遇 到 太 大 问题 ， 如 果 还 有 一 定 的 数学 基础 ， 就 更 加 不 在 话 下 了 “。 但 是 之 后 计算 
机 的 性 能 不 断 提 升 ， 半 透明 泻 染 、 图 像 放 大 、 缩 小 、 旋 转 ， 以 及 对 泻 染 完毕 的 
图 像 进行 复 用 等 ， 都 慢 慢 变 为 了 基础 功能 ， 与 此 同时 ， 对 数学 水 平 的 要 求 也 越 
来 越 高 。 比 如 在 大 部 分 半 透 明 渲染 中 ， 如 果 想 比较 好 地 控制 输出 结果 ， 就 需要 
A 。 此 外 ， 在 涉及 放大 、 缩 小 、 
旋转 等 情况 时 ， 还 会 用 到 线性 代数 的 知识 。 而 通过 对 泻 染 完毕 的 图 像 进行 复 

中 ， 可 以 制作 出 稚 本 的 残 影 效 生 ， 但 是 要 随心 所 欲 地 控制 残 影 ， 就 需要 很 多 数 
学 上 的 考量 。 不 过 大 体 上 只 要 有 高 中 程度 的 数学 知识 ， 就 还 是 可 以 应 对 的 。 


上 


4 


站 


然而 随 着 时 代 的 发 展 进步 ， 可 编程 着 色 器 〈 如 顶点 着 色 器 、 像 素 着 色 器 等 ) 隆 
重 登 场 了 。 要 掌握 这 些 痢 工具， 高 中 水 平 的 数学 知识 就 有 些 不 够 用 了 “。 比 如 通 
过 像素 着 色 器 ， 可 以 将 原 图 片 的 多 个 像素 (像素 点 或 纹理 ) 混合 为 一 个 像素 ， 
即便 这 样 复杂 的 处 理 仍然 可 以 获得 非常 实时 的 处 理 速度 。 为 此 我 们 可 以 制作 一 
个 将 图 片 模糊 的 画面 切换 效果 ， 但 为 了 实现 “模糊 ”这 个 操作 ， 就 需要 不 少数 学 
理论 作为 基础 。 虽 然 有 时 候 比 较 简单 的 数学 算法 也 能 够 实现 一 定 的 效果 (比如 
圆锥 滤波 器 ) ， 但 为 了 实现 一 个 更 完美 的 模糊 效果 ， 就 必须 用 到 算法 的 曲线 呈 
吊 钟 形 的 高 斯 滤波 器 。 而 为 了 理解 这 些 算 法 ， 就 需要 各 种 数学 知识 《有 些 超过 
了 高 中 数学 的 范畴 ) 。 比 如 使 用 着 色 器 使 波纹 或 者 水 面 的 倒影 等 扭曲 的 图 像 显 
现 、 消 失 时 ， 一 般 可 以 用 三 角 函 数 ， 但 只 用 三 角 画 数 所 能 模拟 的 波纹 效果 并 不 
真实 。 此 时 如 果 有 一 定 的 数学 积累 ， 就 很 容易 想到 用 传 立 叶 逆 变换 ， 通 过 组 合 
多 个 正弦 波 来 制作 出 复杂 的 波形 ， 此 外 根据 具体 情况 ， 这 时 可 能 还 需要 用 到 类 
似 “ 分 形 ” 等 数学 工具 。 上 面 提 到 的 这 些 数学 话题 ， 基 本 上 都 超出 了 高 中 数学 的 
范围 ， 需 要 大 学 程度 (甚至 更 高 的 数学 知识 。 


时 至 今日 ， 硬 件 性 能 又 有 了 新 的 飞跃 ， 现 在 的 GPU 并 行 计算 能 力 是 以 前 根本 不 
敢 想象 的 。 而 这 样 的 高 速 化 的 图 像 处 理 ， 极 大 地 减少 了 算法 的 制约 ， 即 便 是 那 
些 基于 高 等 数学 的 复杂 算法 所 驱动 的 画面 特效 ， 我 们 也 可 以 实时 对 其 加 以 运 

行 。 这 对 游戏 开发 者 来 说 无 疑 是 值得 庆祝 的 ， 不 过 与 此 同时 ， 开 发 者 们 也 不 能 
再 以 “这 个 特效 硬件 不 能 实时 处 理 ， 没 法 加 到 游戏 里 ”为 由 来 回避 难点 了 。 在 游 
戏 开发 中 ， 与 游戏 开发 人 员 一 起 工作 的 游戏 策划 人 员 ， 有 时 会 因为 缺少 对 技术 
实现 难度 、 所 需 工 时 的 正确 认识 ， 而 提出 一 些 不 合理 的 要 求 ， 但 现在 游戏 开发 
者 就 很 难 再 用 “硬件 上 无 法 实现 ”来 拒绝 这 些 不 合理 的 要 求 了 ， 所 以 从 某 些 角度 
上 来 说 ， 也 许 现在 的 游戏 开发 反而 比 以 前 更 难 了 。 回 顾 以 前 的 游戏 开发 ， 当 时 
主机 (或 平台 ) 受到 的 硬件 制约 ， 在 现在 看 来 也 是 无 法 想象 的 ， 为 了 回避 这 些 
限制 而 产生 的 无 数 奇妙 的 技术 ， 因 不 得 不 大 量 (甚至 全 部 ) 采用 汇编 语言 而 导 
致 的 运行 速度 过 慢 、 内 存 过 小 、 软 件 工 程 、 开 发 环境 的 不 成 熟 (比如 没有 开发 
语言 不 支持 面向 对 象 ， 等 ， 都 让 以 前 的 游戏 开发 者 无 比 痛苦 。 纵 观 全 局 ， 虽 然 
0 
为 二 和 吧 。 


笔者 站 在 一 名 游戏 学 校 的 教育 者 的 角度 来 看 ， 虽 然 现在 对 人 才 的 要 求 在 不 断 提 
高 ， 但 是 每 年 高 中 毕业 进入 游戏 学 校 的 学 生 的 水 平 并 没有 随 之 增高 ， 因 此 想 要 
培养 出 能 符合 游戏 公司 要 求 的 人 才 也 越 来 越 难 。 电 视 游戏 产业 的 终端 大 多 为 日 
本 制造 ， 这 也 是 日 本 为 之 骄傲 的 产业 之 一 。 电 视 游戏 以 外 的 其 他 产业 ， 现 在 大 
都 也 面临 着 技术 革新 ， 对 人 才 的 要 求 也 越 来 越 高 。 在 此 笔者 深切 地 希望 现在 的 
初中 、 高 中 ， 能 够 顺应 时 代 的 需要 ， 对 教育 方式 进行 更 多 的 研究 、 实 践 ， 以 更 
好 的 水 平 、 更 高 的 效率 、 更 可 行 的 教育 方式 培养 出 更 多 人 才 。 


第 6 章 游戏 开发 的 数学 和 物理 学 基础 
理论 

6.1 比例、 一 次 函数 及 直线 方程 

6.2 ”算式 展开 与 因 式 分 解 

6.3 ”二 次 函数 、 二 次 方程 与 抛物 线 : 圆 

6.4 三 角 画 数 

6.5 ” 疝 量 与 矩阵 

6.6 ”微分 


6.7 ”级 数 与 积分 


6.1 比例、 一 次 函数 及 直线 方程 


Ke Word 
0 比例 系数 、 斜 率 、 截 距 、 参 数 方程 mensy 前 


半 部 分 RANK/normal 后 半 部 分 
。 比例 与 一 次 函数 
一 个 数 可 表示 为 为 一 个 数 乘 以 常数 a 时， 称 这 两 者 “成 比例 关系 *”。 此 时 a 


称 为 比例 系数 。 比 如 一 颗 糖 10 日 元 ， 买 糖 花 费 的 金额 与 糖 的 数量 之 间 就 成 
比例 关系 。 令 买 到 的 糖 的 数量 为 x ， 人 花费 的 金额 为 y ， 可 表示 为 


y = 10x 


此 时 上 面 所 说 的 比例 系数 a 就 等 于 10。 使 用 这 个 等 式 可 以 计算 金额 ， 比 如 
让 x=5， 即 买 5 颗 糖 所 需要 的 金额 y 为 


y=10.5=50 (日 元 ) 


买 100 颗 糖 需要 的 金额 y 为 
y= 10.100 = 1000 (日 元 ) 
上 面 的 等 式 还 可 以 用 其 他 形式 表示 。 一 颗 糖 等 于 10 日 元 ， 那 么 糖 :金额 


=1:10 ( 读 作 1 比 10) 。 通 过 这 种 表示 形式 ， 两 颗 糖 等 于 20 日 元 ， 所 以 福 : 
金额 =2:2; 同 理 ，7 颗 糖 等 于 70 日 元 ， 糖 :金额 =7:70。 这 一 组 关系 可 总 结 
为 


糖 :金额 = 1:10 = 2:20 = 7:70 


请 注意 上 式 的 1:10=2:20 这 一 部 分 。 等 号 两 边 内 侧 的 两 个 数 相 乘 有 
10.2=20， 外 侧 的 两 个 数 相 乘 有 1.20= 20 结果 相同 (参考 图 6-1-1) 。 


20 


[1 
1] :10=2:20 
LL | 
20 
图 6-1-1 等 式 内 侧 两 数 相 乘 与 外 侧 两 数 分 别 相 条 


再 对 比 一 下 2 : 20=7 : 70 这 部 分 。 内 侧 的 两 个 数 相 乘 为 20.7=140， 外 侧 的 两 
个 数 相 乘 为 2.70=140， 结 果 依 然 相 同 。 那 么 我 们 可 以 得 出 结论 : 


当 a:D=c:d 时 ，bc=ad 


这 样 的 关系 我 们 在 2.1 万、2.6 世 中 都 有 使 用 ， 有 兴趣 的 话 可 以 回顾 一 下 。 
接 下 来 我 们 就 尝试 用 这 样 的 关系 来 计算 买 糖 花费 的 金额 。 糖 : 金额 =1 : 10， 
假设 买 5 颗 糖 所 需 的 金额 为 y?》 ， 有 如 下 关系 成 立 。 


1:10 = 5:y 

内 侧 的 两 个 数 相 乘 为 10.5=50， 外 侧 的 两 个 数 相 乘 为 1y =y ， 由 此 可 以 得 到 
y =50， 即 买 5 颗 糖 所 需要 的 金额 y 为 50 日 元 。 下 面 我 们 再 尝试 用 糖 : 金额 
=2 : 20 来 计算 100 颗 糖 所 花费 的 金额 。 

2:20 = 100:y 


由 于 内 侧 的 两 个 数 相 乘 等 于 外 侧 的 两 个 数 相 乘 ， 因 此 有 


20.100 = 2.y 

2000 = 2y 

“= ss 一 1000 

4 2 (日 元 ) 

即 买 100 颗 糖 需要 的 金额 为 1000 日 元 。 


面 这 样 的 比例 关系 中 ， 我 们 总 是 能 找到 一 个 第 数 a 作为 比例 系数 ， 且 


y=ax 
的 关系 成 立 。 上 例 中 糖 的 数量 为 x ， 金 额 为 y ， 比 例 系数 a =10。 


在 之 前 的 革 节 中 ， 出 现 过 以 每 帧 3 个 像素 的 速度 移动 的 物体 ， 此 时 假设 帧 
数 为 x ， 行 进 的 距离 为 y? ， 则 有 


I 


y= 3x 

与 买 糖 的 例子 一 样 ， 通 过 比例 关系 计算 ， 可 以 很 简单 地 计算 出 一 定时 间 的 
移动 距离 。 但 是 与 买 糖 的 例子 不 同 的 是 ， 物 体 的 运动 是 有 初始 位 置 的 ， 而 
初始 位 置 也 需要 体现 在 关系 式 中 。 比 如 物体 开始 在 10 的 位 置 ， 并 且 以 每 帧 
3 像素 的 速度 行进 ， 令 经 过 的 帧 数 为 x ， 位 置 为 y ， 则 有 

y=3x+10 


这 个 关系 可 以 归纳 为 ， 如 果 物 体 的 初始 位 置 为 b ， 并 以 每 帧 o 像素 的 速度 
行进 ， 则 经 过 x 帧 后 所 经 过 的 距离 y 为 


y=ax+b 


这 种 形式 的 等 式 称 为 一 次 画 数 。 当 b =0 时 ， 会 得 到 之 前 的 简单 的 比例 关系 
式 y =ax ， 因 此 这 种 简单 的 比例 关系 式 也 是 一 种 一 次 画 数 。 


一 次 函数 的 图 形 与 参数 


将 一 个 一 次 函数 表示 为 图 形 必 定 得 到 一 条 直线 。 在 一 次 函数 的 图 形 中 ，a 称 
为 斜率 ，b 称 为 截 距 (参考 图 6-1-2) 。 


图 6-1-2 ”一 次 函数 的 图 形 


一 次 函数 可 以 表示 为 一 


条 直线 ， 反 过 来 直线 也 可 以 代表 一 个 一 次 函数 。 但 


是 平面 上 的 直线 并 不 是 都 可 以 用 形 如 


y=ax+b 


的 一 次 函数 来 表示 。 比 如 与 y 轴 平 行 的 直线 就 不 是 一 次 函数 。 这 样 的 直线 
在 数学 上 可 以 被 看 作 其 斜率 a 为 无 穷 大 。 此 外 ， 即 使 是 没有 完全 与 y 轴 平 


(7 而 只 是 相对 y 轴 有 微小 倾 笠 的 直线 ， 其 截 虑 也 可 以 被 看 作 极 天 值 


这 种 情况 在 计算 机 中 是 


很 难处 理 的 (参考 图 6-1-3) 。 


人 


图 6-1-3 ”相对 于 y 轴 有 微小 倾斜 的 直线 


于 是 ， 当 计算 机 将 直线 作为 图 形 处 理 时 ， 都 会 引入 参数 ! ， 并 以 下 面 这 样 的 
参数 方程 来 表示 原来 的 一 次 函数 ， 这 会 让 计算 变 得 更 加 方便 。 


T= (at+i+bzr 


y= ayt+b, 


也 就 是 说 ， 参 数 方程 将 原来 的 一 个 一 次 函数 ， 根 据 x 坐标 、y 坐标 进行 了 拆 
分 ， 平 面 的 情况 下 就 拆 分 为 两 个 一 次 函数 来 共同 表示 一 条 直线 (在 3.3 节 、 
3.4 节 ， 以 及 5.2 节 中 都 用 过 这 种 方法 ) 。 而 上 面 的 参数 ! ， 可 以 将 其 看 作 
时 刻 ， 那 么 上 面 的 等 式 就 可 以 表示 为 “在 时 刻 0 时 位 于 (bx , by )， 并 以 速度 
(ax , ay ) 运动 的 直线 ”。 例 如 


I 二 3t 十 1 

一 4 十 2 

这 个 参数 方程 ， 就 表示 在 时 刻 0 时 位 于 位 置 (1, 2)， 并 且 以 速度 (3, 4) 运动 
的 一 条 直线 。 这 种 表示 方法 与 y =ax +b 不 同 的 是 ， 即 便 是 与 y 轴 平 行 的 直 
线 ， 只 要 使 aox 为 0， 也 可 以 很 目 然 地 表示 出 来 ， 非 常 方便。 


在 此 基础 上 ， 如 果 对 参数 的 取 值 范围 进行 限制 ， 就 可 以 表示 连接 一 点 到 男 
一 点 的 线段 ， 除 此 之 外 还 有 很 多 其 他 用 途 。 像 之 前 的 


这 条 直线 ， 将 上 的 值 限制 在 0<t< 2 范围 内 ， 就 可 以 很 简单 地 表示 连接 点 
(1, 2) 到 点 (7, 10) 的 线段 (参考 图 6-1-4) 。 


Y 


图 6-1-4 连接 点 (1, 2) 到 点 (7, 10) 的 线段 
像 这 样 ， 在 2D (平面 ) 中 ， 使 用 两 个 一 次 函数 组 成 一 组 参数 方程 来 表示 直 


线 的 方法 ， 束 可 以 很 容易 地 表示 各 种 各 样 的 直线 、 线 段 ， 这 在 游戏 中 制作 
直线 、 线 段 时 经 党 被 使 用 。 


6.2 ”算式 展开 与 因 式 分 解 


ken Word 
计算 优先 级 、 分 配 律 RANK/easy 前 半 部 分 


RANK/normal 后 半 部 分 
。 算式 展开 


所 谓 算式 展开 ， 大 致 可 以 看 作 将 一 个 移 进行 加 法 运算 〈 或 减法 运算 ) 后 进 
0 
。 比如 


(1+2)(3+4) 
这 个 算式 可 以 变形 为 
1x3+1x4+2x3+2x14 


这 种 变形 就 是 展开 。 由 于 括号 内 的 加 法 (减法 ) 运算 需要 比 乘法 运算 优先 
执行 ， 因 此 展开 操作 也 可 以 被 看 作 是 消去 括号 的 操作 。 而 上 面 的 算式 ， 无 
论 展开 前 后 ， 都 会 得 到 21 这 个 值 。 


对 于 上 面 的 例子 ， 由 于 算式 所 包含 的 都 是 常数 ， 进 行 算式 展开 并 没有 得 到 
什么 实际 的 好 处 ， 反 而 增加 了 计算 量 。 但 是 如 果 算 式 中 含有 变量 ， 算 式 的 
展开 就 变 得 非常 有 意义 了 。 比 如 程序 中 有 

(art + br) + (at+b,) =7 (1 为 变量 ， qa、、b。、a,、b,、r 为 党 
数 ) 


这 样 一 个 方程 需要 求解 ， 也 就 是 说 ， 要 根据 这 个 等 式 将 1 通过 a 、b、、a,y 
`b,、r 表示 出 来 (在 3.4 节 中 遇 到 过 类 似 问题 ，， 此 时 就 必须 将 等 式 展 

开 。 对 于 上 例 这 样 的 等 式 ， 程 序 中 一 般 会 将 等 式 展开 为 at ?+bt +c = 0 这 种 形 
式 ， 以 便 进一步 通过 二 次 方程 的 求 根 公 式 求解 +。 本 小 市 将 首先 围 绕 等 式 
的 展开 进行 二 加 外 人 


展开 的 基础 : 分 配 率 


让 我 们 从 最 简单 的 展开 说 起 ， 来 一 起 思考 对 于 a(b +c ) 这 个 算式 ， 如 何 ; 
其 括号 消去 。 按 照 原来 的 计算 顺序 ， 这 个 算式 表示 数 与 数 c 相 加 ， 然 
0 
共 准 备 btc 组 。 


举 一 个 更 具体 的 例子 。 比 如 一 袋 5 颗 糖 ， 需 要 准备 3 袋 +7 袋 ， 求 一 共有 多 
少 颗 糖 〈 即 a =5、b =3、c=7) 。 按 算式 原本 的 顺序 计算 ， 糖 共有 3 袋 +7 
袋 =10 袋 ， 每 袋 分 别 装 5 颗 糖 ， 共 计 5x10=50 颗 。 但 是 还 有 其 他 计算 方 
法 ， 比 如 3 袋 糖 有 5x3=15 颗 ，7 袋 则 有 5x7=35 颗 ， 总 数 是 15+35=50 颗 ， 
两 次 计算 结果 相同 (参考 图 6-2-1) 。 


并 


| 耿 


人 人 人 人 人 和 人， 


图 6-2-1 5 颗 一 袋 的 糖 共 3+7 袋 
将 括号 内 的 数 相 加 之 前 ， 分 别 与 括号 外 的 数 相 乘 再 相 加 ， 与 先 相 加 再 相 乘 


的 计算 结 末 是 相 


a(b+c)=ab+ac 


司 的 ， 因 此 等 式 a (b +c) 就 可 以 表示 为 


这 就 是 展开 的 基础 。 请 注意 乘法 的 顺序 对 结果 是 没有 影响 的 。 


a(b+c)=(b+c)a=ab+ac 


徊 也 能 得 到 相同 结 采 。 


要 乘 的 数 放 在 


后 


如 果 加 法 部 分 的 数量 增加 ， 计 算 方 法 也 一 样 ， 比 如 5 颗 一 袋 的 糖 共 3 袋 +7 
伐 +5 袋 ， 可 以 依 用 同样 的 解法 。 


a(b+c+d)=ab+ac+ad 


括号 中 的 加 法 部 分 无 论 增加 多 少 项 ， 


以 了 ， 这 在 数学 中 称 为 分 配 律 。 
更 复杂 的 展开 式 以 及 2 次 方 、3 次 方 的 展开 式 


只 要 将 每 项 的 数字 分 配给 a 相 乘 束 可 


下 面 考虑 更 复杂 的 情况 ，(a +b )(c +d ) 这 样 的 算式 要 如 何 展开 呢 ? 这 个 算式 


可 以 理解 为 ，5 颗 每 袋 的 普通 糖果 +2 颗 每 袋 的 赠品 糖果 ， 一 共 准 备 3 袋 +7 
袋 ， 求 一 共有 多 少 颗 糖果 (参考 图 6-2-2) 。 
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图 6-2-2 5+2 颗 糖果 共 3+7 袋 

在 日 常生 活 中 ， 可 能 一 般 会 先 计 算 3 袋 +7 袋 一 共有 多 少 袋 。 我 们 也 可 以 采 
用 同样 的 思路 ， 对 于 算式 (a +b )(c +d )， 将 (c +d ) 的 部 分 看 作 一 个 数 e ， 先 
将 (c +d )=e 置换 进 算式 ， 

(a+b)(c+d)=(a+t+b)e 

套用 之 前 的 分 配 律 (b +c )a =ab +ac 可 得 

(a+b)e=ae+be 

进一步 将 (c +d )=e 置换 进去 ， 把 e 替换 为 原来 的 (c+d)。 
ae+be=a(c+d)+b(c+d) 

再 次 使 用 分 配 律 继续 展开 可 得 

a(c+d)+b(c+d)=actad+bc+bd 


最 终 得 到 
(lat+b)(c+d)=ac+ad+bc+bd 


所 以 5 颗 每 袋 的 普通 糖果 +2 颗 每 袋 的 赠品 糖果 ， 一 共 准 备 3 袋 +7 袋 ， 总 
共 需 要 普通 装 5 个 x 3 袋 + 普通 装 5 个 x7 袋 + 赠 吊装 2 个 x3 袋 + 赠 吊装 


2 个 x7 袋 (参考 图 6-2-2) 。 
另外 ， 由 上 面 的 基本 展开 式 还 可 以 得 到 以 下 绪论 。 
(a+b)Y=a*+2ab+b? 


有 兴趣 的 读者 可 以 根据 (a +b )* =(a +b )(a +b )， 使 用 上 面 的 展开 式 求解 验证 
一 下 。 使 用 这 个 结论 我 们 就 可 以 求解 本 小 节 一 开始 举例 的 方程 


(ast + br) + (yt + bh) =" (1 为 变量 ，a。、b。、a,、b,、r 为 党 
数 ) 
一 起 来 试 试 吧 。 


1/ \2 3 .7 
(azrt 十 br)” 二 | ayt 二 by 六 一 7 
地 帮 十 2azrbzt 十 b2 一 as 如 十 2aybyt + 一 三 


人 
项 。 


[az2 一 ay)t + 2(azbs 二 ab)t 十 b2 十 思 一 7r2 一 0 


然后 令 a=a? +ay ~b=2(arbr t+ayby) ~c = 如 +b? 一 ， 使 用 二 次 方程 的 求 
根 公式 ， 就 可 以 得 到 答案 。 


这 种 2 次 方 的 展开 式 ， 在 游戏 编程 中 经 常 被 用 于 基于 距离 的 碰撞 检测 等 很 
0 频 度 略 低 ， 展 开 过 程 
0 o 


(a+b) = (a+b)(at+b)? 


(a+b)(a: + 2ab + bb) 


3 2 天 人 
= +2ab+ab +ab+2a + 


= +3ab+3a + 
整理 一 下 得 到 
(a 十 bp) 一 0 十 3a2 十 3ap2 十 相 


3 次 方 展开 式 虽 然 略 复 洒 ， 不 过 还 是 有 一 些 场景 会 用 到 。 而 如 果 要 进一步 推 
广 到 (a +b )" 的 展开 式 ， 则 可 以 使 用 “二 项 式 定理 *”， 此 处 不 再 详细 说 明 。 


另外 ， 为 了 方便 地 进行 等 式 的 变形 ， 还 有 下 面 这 样 的 展开 式 。 


(T+a}lzT—a)= T2 一 02 

感 兴趣 的 读者 可 以 将 等 式 左边 展开 验证 一 下 。 这 个 展开 式 在 二 次 方程 的 求 
根 公 式 中 经 常用 到 ， 建 议 牢 记 。 

算式 展开 的 逆 运 算 : 因 式 分 解 

与 算式 展开 相反 ， 将 一 个 先进 行 乘法 运算 后 进行 加 法 运算 的 算式 ， 变 形 为 
先进 行 加 法 运算 (或 减法 运算 ) 后 进行 乘法 运算 的 算式 ， 这 样 的 操作 叫 作 
因 式 分 解 。 比 如 将 


zz2+(a+B9z+a5 

这 个 等 式 变形 为 

(z+altz+D) 

就 完成 了 一 次 因 式 分 解 。 至 于 这 两 个 算式 是 否 真 的 相等 ， 可 以 将 (x +a )(x 
+B ) 展开 进行 验证 。 一 般 来 说 ， 算 式 的 展开 只 要 按照 规则 一 步 步 操作 就 可 


以 ， 相 对 比较 简单 ， 因 式 分 解 则 很 容易 遇 到 麻烦 。 但 是 因 式 分 解 仍 然 很 重 
要 ， 因 为 这 是 求解 方程 式 所 必需 的 。 比 如 对 


x2-5x+6=0 
这 个 方程 求解 ， 先 对 左边 进行 因 式 分 解 ， 
(x-3)(x-2)=0 


就 得 到 x =3、x =2 两 个 解 。 将 其 进一步 推广 ， 如 果 能 对 
ax2+bx+c=0 


这 个 等 式 的 左边 进行 因 式 分 解 ， 就 可 以 对 二 次 方程 的 求 根 公式 求解 。 这 部 
分 会 在 下 一 小 节 中 详细 介绍 ， 请 注意 参考 。 


6.3 ”二 次 函数 、 二 次 方程 与 抛物 线 . 圆 


K 人 Word 
半 部 分 
。 二 次 函数 


完全 平方 、 求 根 公式 、 圆 锥 曲线 i 


数 征 指 形 如 y =ax “+bx +c 的 函 数 ， 其 特征 是 包含 x “这样 一 个 平方 
° 最 简单 的 二 次 函数 的 形式 为 y=ax ”， 其 图 形 如 图 6-3-1 所 示 。 


了 


图 6-3-1 最 简单 的 二 次 画 数 的 图 形 (抛物 线 ) 


这 样 的 曲线 称 为 抛物 线 ， 顾 名 思 义 ， 向 空中 抛 出 一 个 物体 的 运动 轨迹 会 形 
成 这 样 的 曲线 (其 实 由 于 空气 阻力 等 原因 ， 物体 实际 运动 的 轨迹 并 不 是 严 
格 的 抛物 线 ) 。 由 于 x? 是 一 个 数 自己 与 自己 相 乘 ， 当 x 为 正 时 显然 x? 也 
为 正 ， 当 x 为 负 时 ， 人 负数 x 负数 仍然 为 正 ， 因 此 y= ax “这 个 函数 在 a >0 
时 ， 无 论 x 为 任意 实数 ， ， 而 当 a <0 时 ， 无 论 x 为 任意 实 
数 ，y 都 为 负数 或 0。 也 就 是 说 ，y = ax ”这 个 函数 只 可 能 取 正 数 与 0 (图 6- 
3-1 左 ) ， 或 负数 与 0 (图 6-3-1 有 ) 


。 二 次 方程 的 完全 平方 


Ey =ax “2 这 样 一 个 含有 x 于 万 项 拉 男 数 的 基础 上 ， 加 上 x 的 一 次 方 项 以 及 

c ， 就 得 到 了 二 次 函数 的 一 般 形式 y =ax 2 bg +cC。 这 个 等 式 所 表示 的 
图 形 等 同 于 将 y =ax* 的 图 形 同 x 方 同 及 y 方 同 平移 。 也 就 是 说 ， 对 ax 
加 上 一 次 方程 式 bx +c ， 只 会 改变 其 位 置 而 个 会 对 图 形 本 届 的 形状 生 影 
响 。 是 不 是 有 些 不 相信 呢 ? 接 下 来 就 让 我 们 对 y =ax “+bx +c 做 一 些 变形 来 
证 明 这 个 结论 。 


首先 考 虚 将 等 式 先 变形 为 y =a 避 + 人 入 的 形式 。 如 果 能 实现 变形 ， 变 形 后 的 
等 式 就 能 表示 抛物 线 向 y 方 向 平移 和。 为 此 我 们 希望 将 x 的 一 次 项 部 分 bx 
消去 ， 于 是 就 需要 设法 将 bx 并 入 x 的 二 次 项 中 。 我 们 先 将 bx 部 分 强制 乘 以 
一 个 系数 qa ， 得 到 如 下 等 式 。 


一 QIZ 十 一 十 C 
a 


然后 设法 将 这 个 等 式 括号 内 的 部 分 变 为 平方 的 形式 。 请 大 家 回想 一 下 前 一 
小 节 中 讲 过 的 平方 的 展开 式 (x ta =x”+2ax +4< ， 是 不 征 有 一 些 局 发 
呢 ? 由 于 展开 式 中 x 且 一 次 项 系数 为 2a ， 而 此 处 括号 内 的 一 次 项 系数 为 a 


) 
2a 一 一 一 一 Vi /一 -TY > /FT 性 
,那么 令 ” “a ， 即 ””2a ， 这 样 我 们 就 向 平方 形式 迈进 了 一 步 。 但 是 还 
bp \? 


肌 少 展开 式 的 ?部 分 ， 印 匀 少 ( 政 】， 我 们 可 以 合用 一 个 小 技巧， 先 加 上 


b 
(z ， 再 减 去 同样 的 项 ， 最 后 得 到 


如 b b 2 pb 2 
y = 工 十 2 “ 二 一 上 ey re i 二 十 
2a 92a 9a 


这 样 一 来 ， 花 括号 中 的 前 3 项 ， 正 好 满足 x“+2ax +a ?的 形式 ， 将 其 整理 为 
(x +a 的 形式 ， 有 


by\” 
PE 2) OE Ee 


7 


bp AN- pb 
y= 二 alIiI 二 + 下 一 da: 一 -+c 
7 2a 4a2 


将 移出 去 的 常数 ， 与 伦 括号 外 原 有 的 常数 c 合并 并 进行 通 分 ， 有 


| b\?: Pdac 
ya) 如 


z= 一 二 5 让 全 十， 
十 村 2a ， 因 此 y= ax“ +bx +c 的 图 形 ， 就 等 于 将 y= ax ”的 图 形 平 


b 友 2 一 4ac 


a 240 da ) (参考 图 6-3-2) 。 将 二 次 函数 变形 为 这 种 形式 的 等 
式 ， 叫 作 完全 平方 。 


图 6-3-2 平行 移动 的 图 形 
计算 二 次 方程 的 求 根 公 式 
上 面 通过 完全 平方 得 到 了 二 次 函数 ， 令 y=0， 就 可 以 对 二 次 方程 


ax2+bx+c=0 


求解 。 如 果 二 次 方程 比较 简单 ， 可 以 直接 通过 因 式 分 解 手工 算出 结果 ， 而 
i 0 往往 我 们 会 用 到 二 次 方程 的 求 根 公式 ， 通 过 求 根 
公式 可 以 对 任意 a、b、c 值 的 x 求 解 ， 特 别 是 在 用 计算 机 来 求解 二 次 方程 
时 ， 这 种 方法 非常 方便 。 下 面 束 让 我 们 实际 壬 试 一 下 ， 对 于 方程 


ax*+bx+c=0 


从 刚才 的 结果 可 知 


两 边 同 除 以 a ， 有 


1 了 2 一 4ac b | b> 一 4ac 
并 十 二 一 十 | 了 和 V 5 二 人 0 
2a \ 4a- 2a 4a- 


上 Vb? — 4ac 
2a 
pb 
将 2a 移 项 到 右边 有 
b + V1 — 4ac 
2a 2a 
—b+tvVh— 4ac 
"a 


这 称 为 二 次 方程 的 求 根 公 式 。 这 个 等 式 在 游戏 编程 中 请 务必 牢记 。 
而 如 果 二 次 方程 是 
ax2+2bx+c=0 


这 样 的 形式 ， 即 x 的 一 次 项 乘 以 了 系数 2， 则 解 会 稍微 简单 一 些 ， 实 际 求解 
过 程 如 下 。 


4 
ar 十 2br 十 c 王 0 


( 2 V 反 2 一 ac 
z+)=+——~— 
a 
了 VD 一 ac 
a a 
一 主 Vb —ac 


a 


上 面 的 解 在 游戏 开发 中 也 非常 实用 ， 和 希望 读者 可 以 记 下 来 〈 在 3.4 节 中 使 用 


过 ) 
圆 的 方程 


上 面 的 二 次 函数 中 只 有 变量 x 包含 平方 项 ， 如 果 不 单 是 x ， 变 量 y 也 包含 平 
方 项 ， 那 么 应 该 如 何 处 理 呢 ? 这 种 情况 下 ， 我 们 一 般 会 将 函数 对 应 圆锥 曲 
线 。 根 据 各 项 系数 值 的 不 同 ， 圆 锥 曲线 可 能 呈现 双 曲 线 、 椭 圆 等 形状 。 而 
圆锥 曲线 中 最 重要 的 是 圆 的 方程 。 


圆 的 方程 一 般 形 如 


x2+y2+ax+by+c=0 


不 过 这 样 的 等 式 是 否 真 的 能 表示 一 个 圆 ， 我 们 很 难 直 观 地 看 出 来 ， 而 圆 的 
一 些 特征 值 ， 比 如 圆 的 半径 及 中 心 位 置 等 ， 也 无 法 直接 得 到 。 因 此 需要 将 
上 面 的 等 式 进行 变形 。 


Z2 十 oy 二 ar 十 py+c=0 
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a Db 人们 + 的 -: 
上 面 等 式 中 包含 的 2、2 、\? 2 等 虽然 形式 看 起 来 有 点 复杂 ， 
其 : 证 币 数 。 为 了 理解 万 便 ， 可 以 将 基督 换 为 其 他 第 数 整 理 一 
) 


这 个 等 式 就 变 为 了 
1 9 \9 J 
(Z 一 To) 十 (一 加 六 一 7 


这 个 等 式 正好 与 义 股 定理 完全 一 致 ， 变 量 x、y 表示 从 坐标 (ko,yo) 出 
发 、 距 离 为 的 一 点 。 而 这 样 的 点 的 集合 就 是 一 个 圆 ， 因 此 方程 


2 \2 2 
< ) < Ea 


(一 To) 十 局 一 加 六 = 了 


表示 中 心 坐 标 为 (x 0 ,yo)、 半 径 为 + 的 圆 。 这 个 等 式 在 游戏 编程 中 非常 重 
要 ， 建 议 牢 记 (在 3.4 中 有 使 用 ) 


6.4 三 角 画 数 


Ke Word 
个 直角 三 角形 、 单 位 园 、 弧 度 、 相 位 RANK/normal 


。 三角 画 数 


所 谓 三 角 函 数 ， 顾 名 思 义 ， 就 是 关于 三 角形 边 长 与 角度 的 函数 。 三 角 郴 数 

有 很 多 种 类 ， 在 游戏 编程 中 特别 重要 的 是 cos、sin 、tan 三 个 。 在 这 3 个 函 

i 对 于 直角 三 角形 的 一 个 锐角 0 ， 有 如 下 关系 成 立 ( 参 
6-4-1 


a 
cos0 =— 
PP 


有 b 
SInP 一 一 
了 


b 
tangd 一 一 
a 


a 国 


a 
图 6-4-1 直角 三 角形 的 三 边 与 角 0 
这 些 画 数 之 所 以 在 游戏 开发 中 很 重要 ， 主 要 是 因为 当 侍 标 上 有 一 上 态 P (x,y) 


(x>0 且 y>0) 时 ， 如 果 令 点 了 与 原点 O 连接 成 的 线段 长 为 +， 线段 OP 
与 x 轴 的 腾 角 为 9 ， 则 可 以 根据 三 角 画 数 很 容易 地 得 到 以 下 关系 式 。 


工 
COS 日 一 一 


y 
Sin 一 一 
Tr 


_ 1 
tanf = EA 
I 


图 6-4-2 ”将 坐标 上 一 点 与 原点 连接 构成 的 三 角 画 数 关系 
对 cos 与 sn 的 等 式 进行 变形 ， 即 可 得 到 


T=7*Cc0868 

y=7:sing 

这 是 非常 有 用 的 关系 式 。 利 用 这 个 等 式 ， 将 r 固定 ， 让 9 进行 变化 ， 束 可 以 
产生 半径 为 r 的 旋转 运动 (参考 图 6-4-3 左 ， 在 1.6 节 中 有 使 用 ) 。 而 将 角 
度 9 固定， 让 r 进行 变化 ， 则 可 以 让 物体 沿 角 度 9 的 方向 移动 (参考 图 6-4- 
3 右 ,， 在 1.3 节 中 有 使 用 ) *。 


图 6-4-3 
tan E 函数 在 游戏 开发 中 直接 使 用 的 机 会 要 少 


使 用 三 角 画 数 移动 坐标 


经 党 被 用 到 。 


1? 
8 二 tanr-l (2 
TT 


据 此 可 以 方便 地 根据 坐标 (x ,y ) 计算 夹 角 。 特 别 古 
不 用 考虑 异常 处 理 也 能 得 到 正确 象限 的 角度 ， 所 坟 和 = 


C 语言 中 的 atan2 函数 。 
不 限定 角度 范围 的 三 角 画 数 定义 


三 


标 系 只 


限定 在 了 第 一 象限 内 


一 些 ， 不 过 tan 的 反 画 数 tanl 却 


当 x 的 绝对 值 极 小 时 ， 


家 能 更 好 地 利用 


上 面 讨论 了 三 角 函 数 (atan2 函数 除外 ) 在 x>0 且 y>0 时 的 情况 ， 即 将 从 
。 这 是 因 为 三 角 函 数 cos、sin、tan 是 根据 直角 


三 角形 定义 的 ， 所 以 角度 9 必须 小 于 90 度 。 而 为 了 使 不 限定 角度 i 的 范围 
时 上 面 的 结论 仍然 成 立 ， 我 们 需要 引入 “单位 圆 ”的 概念 来 重新 定义 三 角 画 


数 。 假 


设 有 以 原点 O 为 中 心 、 


半 f 


对 为 1 的 圆 〈 即 单位 圆 ) ， 


点 P(x,y)， 则 有 如 下 定义 (参考 图 6-4-4) 。 


cos8 一 


sin8 = 


I 


y 


1 
tang = EA 


TI 


单位 圆 | 


上 有 一 


一 工 


图 6-4-4 ”基于 单位 圆 的 三 角 画 数 


这 样 一 来 ， 三 角 函 数 的 定义 就 不 再 限定 角度 ， 可 以 应 用 于 任意 象限 的 坐 
标 ， 变 得 更 加 方便 。 计 算 机 中 的 三 角 函 数 cos、sin、tan 等 ， 都 是 基于 单位 
圆 进行 定义 的 ， 因 此 无 需 担 心 角 度 太 大 无 法 使 用 的 问题 。 

下 面 我 们 来 考虑 一 下 角 6 的 单位 。 在 日 常生 活 中 ， 角 的 单位 一 般 都 使 用 角 
度 (一 周 为 360 度 ) ， 而 在 高 等 数学 及 计算 机 中 ， 一 般 使 用 弧度 作为 三 角 
函数 的 单位 。 比 如 在 单位 圆 中 ， 和 角度 正好 等 于 单位 贺 上 一 段 缴 的 长 度 ( 参 
考 图 6-4-5) ， 单位 圆 一 周 的 周 长 为 27r ， 所 以 一 周 的 角 - (360 度 ) 以 弧度 为 
单位 就 为 2r ， 同 理 ，30 度 为 6、60 度 为 3、90 度 为 2、180 度 正好 等 于 


元 


图 6-4-5 ”弧度 的 定义 


使 用 弧度 为 单位 ， 可 以 很 容易 地 对 三 角 丽 数 进 行 微 分 积分 ， 非 常 实 用 。 事 
实 二 在 游戏 开发 中 ， 几 科 没 有 角度 的 用 起 之 地 ， 绝 大 多 数 情况 下 才 会 训 
度 为 单位 。 


此 外 一 个 角 的 角度 还 可 能 被 定义 为 负 (参考 图 6-4-6) 。 在 以 y 轴 上 方 为 正 
的 坐标 系 中 ， 和 角度 的 正方 向 ( 即 角 度 增加 的 方向 ) 被 规定 为 逆 时 针 方向 ， 
角度 的 负 方 向 与 此 相反 ， 为 顺 时 针 方 向 (但 是 在 计算 机 中 2D 坐标 一 般 以 y 
轴 下 方 为 正 ， 因 此 方向 正好 是 颠倒 的 ) 。 


图 6-4-6 负 角 


既然 还 有 人 负 和 角度 的 定义 ， 那 么 所 有 值 ， 即 在 全 体 实 数 范 围 内 就 都 可 以 定义 
三 角 函 数 (但 是 tan 要 除外 ，tan 在 一 部 分 值 范 围 内 是 无 法 定义 的 ) 。 这 样 
一 来 ， 本 来 仅 在 直角 三 角形 ， 即 0 度 ~90 度 范 围 内 才 有 定义 的 三 角 画 数 ， 
一 下 子 有 了 极 大 的 扩展 空间 。 在 实数 范围 内 定义 的 三 角 函 数 cos、sin 、tan 
的 图 形 如 图 6-4-7 所 示 。 可 以 看 到 cos 和 sin 的 图 形 完全 相同 ， 只 是 在 x 轴 
方向 的 位 置 有 所 差异 。 


jj 


图 6-4-7 ”在 所 有 实数 范围 内 定义 的 三 角 画 数 的 图 形 
加 法 定理 与 积 化 和 差 


i 角 辑 数 来 说 ， 有 各 种 各 样 的 公式 成 

。 这些 公 式 不 但 数量 繁多 ， 其 中 有 一 些 还 非常 复杂 ， 这 也 是 大 家 对 三 角 
而 数 区 而 渤 之 的 原因 。 但 是 接 下 来 我 们 还 是 要 从 这 些 公 式 中 挑选 一 个 进行 
说 明 ， 那 就 是 对 于 游戏 开发 极为 重要 的 cos、sin 的 加 法 定理 。 所 谓 加 法 定 
理 ， 是 有 关 cos(a +B ) 以 及 sin(a +B ) 的 公式 ， 为 了 理解 公式 的 意义 ， 大 家 
可 以 将 其 想象 成 让 位 于 单位 圆 上 角度 a 位 置 的 一 点 ， 再 旋转 角度 Bp (参考 
图 6-4-8) 。 由 于 是 将 一 点 旋转 某 个 角度 ， 因 此 在 游戏 开发 中 使 用 旋转 矩阵 
(参考 6.5 方 ) 可 能 会 比较 容易 理解 。 


图 6-4-8 ”表示 加 法 定理 的 图 


具体 来 说 ， 点 (cos(w +B ), sin(a +B )) 可 以 由 点 (cos a , sin a ) 旋转 角度 8 得 
到 ， 使 用 旋转 矩阵 则 有 


cos(a 十 了 ) fcos9 —sinB COS AO 
sinlaw 二 5) \sin3 cosB sin a 


由 这 个 等 式 的 x 部 分 可 知 


cos(a + B )= cosa cosB - sina sinB 
由 等 式 的 y 部 分 可 知 

sin(a + B ) = cosa sing + sina cosB 

上 面 这 两 个 等 式 经 常 被 用 于 包含 二 角 函数 的 等 式 变形 中 ， 所 以 记 下 来 会 比 


。 在 游戏 开发 中 ， 将 2 代入 B 往往 会 得 到 一 些 方便 的 结论 ， 实 际 来 
二 一 下 。 


cos(a + 有 ) = cosa cosp - sina sinB 


1 


代入 人 


COS a 可 = 


| 习 


， 上 天 
一 COS CQ COS — SIN CQ SIn| 一 


=cosa:0—sina:1 


M5| 当 


一 一 Sina 


刁 


随 着 角度 增加 13， cos 变 成 了 -sin。 接 下 来 对 sin 进行 同样 的 处 理 。 


sin(g + PB ) = cosa sinB + sina cosp 
本 开 
代入 ” 2 可 得 


i ry . A 
sin|la 十 一 |=cosawsmn 一 十 sinacos 一 
( ) 5 5 


可 EA 可 


一 cosa :1 一 Sina :0 


一 CO3 OQ 


刁 


可 以 看 到 随 着 角度 增加 0 了， 


观察 三 角 函 数 的 图 形 (图 6-4-7) 可 以 看 出 ，cos 与 sin 其 实 只 有 角度 位 置 
( 称 为 相位 ) 的 差异 ， 上 面 的 等 式 正 好 说 明了 这 一 点 。 而 如 果 令 上 面 等 式 


中 的 8 一 了 ， 则 有 


i 
cs 人 (。 一 3) = Sin a 
2 
py 
sinl a—5)=—cosa 


像 这 样 将 角度 旋转 2 或 


sin 变 为 了 cos。 


2 ， 让 三 角 函 数 之 间 进 行 转换 的 方法 ， 在 求 向 量 的 


3 
秋 直 向 量 时 非 党 方便， 希望 读者 朋友 最 好 能 记 下 来 。 
而 对 于 等 式 


sin(g + PB ) = cosa sinB + sina cosp 


如 果 将 6 替换 为 -5 ， 由 于 正弦 函数 是 奇 函数 ， 有 sin (-B )=-sin 8 ; 余弦 函数 
为 偶 函 数 ， 有 cos (-8 )= cos B ， 因 此 


sin(g - B ) = -cosa sinf + Sina cosp 
然后 用 之 前 的 两 个 等 式 相 减 可 得 


sin(g + B )- sin(ag -b)= 2cosa sinf 


A 
如 果 进 一 步 令 x+8=A、aw-8=B， 根据 ”” 2 、 2 “可 得 


sin - 


本 9 


sinA—sinB=2cos 


即 可 以 将 三 角 函 数 的 减法 转化 为 乘法 。 这 样 的 公式 叫 作 积 化 和 差 公 式 ， 根 
据 加 减 的 三 角 画 数 的 不 同 ， 积 化 和 差 公 式 也 有 很 多 变形 ， 这 里 不 再 详 述 。 
积 化 和 差 公式 在 游戏 开发 中 用 到 的 地 方 不 多 ， 在 涉及 微分 等 理论 时 可 能 会 
派 上 用 场 。 其 实 上 面 列举 的 将 正弦 辑 数 减法 运算 转换 为 乘法 运算 的 公式 ， 
在 三 角 画 数 的 微分 公式 中 已 经 有 用 到 ， 建 议 记 下 来 。 


6.5” 问 量 与 矩阵 


Ke Word 
0 长 度 、 方 向 、 一 次 变换 、 首 变换 RANK/normal 


。 向 量 


所 谓 向 量 ， 就 是 有 长 度 及 方向 的 量 ， 一 般 由 多 个 标量 (scalar， 即 单纯 的 数 
字 ) 组 合 而 成 。 比 如 由 两 个 标量 组 合 而 成 的 二 维 癌 量 ， 可 以 表示 二 维 空 间 

(平面 ) 中 有 长 度 及 方向 的 量 。 由 三 个 标量 组 成 的 三 维 向 量 ， 可 以 表示 三 
维 空间 中 具有 长 度 及 方向 的 量 。 同 理 也 可 以 扩展 到 四 维 向 量 ， 在 游戏 中 一 
般 被 作为 四 元 数 (quaternion) 使 用 。 


请 注意 向 量 与 有 向 线段 是 不 同 的 。 有 向 线段 有 起 点 和 终点 ， 而 向 量 则 与 起 
点 无 大， 平行 移动 一 个 癌 量 得 到 的 还 是 原来 的 同 量 ， 因 为 表示 一 个 二 维 空 


间 的 有 向 线段 时 ， 需 要 起 点 及 终点 的 xy 坐标 ， 总 计 4 个 标量 ， 而 表示 二 维 
空间 的 向 量 时 则 只 需要 两 个 标量 就 足够 了 。 

向 量 不 仅 能 以 位 置 向 量 的 形式 表示 空间 上 的 位 置 ， 此 外 如 速度 、 加 速度 等 
物理 量 ， 或 者 直线 、 贺 等 图 形 ， 甚 至 旋转 等 坐标 变换 等 都 可 以 用 向 量 来 表 
示 ， 在 游戏 开发 (特别 是 3D 游戏 ) 中 ， 向 量 是 非常 重要 的 工具 。 


回 量 在 数学 上 的 表现 形式 有 很 多 种 ， 玫 先 当 变量 名 写作 粗 体 的 @ 时 ， 这 个 
变量 融 可 以 表示 一 个 同 量 。 同 量 也 可 以 用 a 这 种 在 变量 名 上 加 上 篆 尖 的 形 


式 来 表示 ， 不 过 这 种 形式 在 高 
形式 的 变量 表示 向 量 。 


回 量 还 可 以 表示 为 者 干 个 标量 的 组 合 ， 
如 表示 一 个 三 维 向 量 时 ， 可 以 用 三 维 空 


1 
y 


a 
向 量 有 以 下 属性 。 

绝对 什 

向 量 的 绝对 值 的 定义 如 下 。 


QT 


a 


|a| = Ve 十 a 


a I 
ly 


三 维 向 量 国 


|a| = Ve 十 0 十 a2 


有 一 
E 辐 的 多 


等 数学 中 并 不 常用 。 本 书 中 统一 以 粗 体 字 a 


些 书 中 倾向 于 用 这 种 形式 。 比 
标 (x,y,z) 表示 (x,y，,z 


) 称 为 列 向 量 。 


这 是 由 色 股 定理 的 公式 得 来 的 ， 
标量 来 说 ， 
因此 向 量 的 长 等 于 其 绝对 值 。 
单位 向 量 


单位 向 量 就 是 


(ae 


问 量 的 长 就 是 其 绝对 值 。 
直线 上 一 点 距离 原点 的 长 度 等 于 其 绝对 值 ， 


对 于 普通 的 数字 
这 也 适用 于 向 量 ， 


绝对 值 (长 度 ) 为 1 的 向 量 。 


|a| = V cz 一 0 +a2=1 


时 为 单位 向 量 。 一 般 表示 单位 向 量 时 ， 可 以 在 向 量 的 变量 名 上 加 上 t 符 号 ， 

写作 &、5。 单 位 向 量 在 游戏 开发 中 一 般 被 作为 基准 向 量 ， 应 用 十 分 广泛 ， 

请 读者 牢记 。 

向 量 的 运算 

与 使 用 普通 数字 的 标量 相 
。 加 法 


司 ， 向 量 之 间 也 有 各 种 运算 ， 比 如 下 面 这 些 。 


ar br 
两 个 二 维 向 量 同居 by/ 的 加 法 运算 为 
ar br ar + br 
人 四 (2) 外 十 
b, 


(1 br 
a = b= 
两 个 三 维 向 量 国 ， 国 


即 相同 分 量 之 间 分 别 相 加 ， 就 是 癌 量 间 的 加 法 运算 。 不 要 问 这 是 为 什 
么 ， 因 为 就 是 这 样 定 义 的 。 如 下 图 所 示 ， 向 量 的 加 法 运算 ， 等 于 将 各 
向 量 的 起 点 与 终点 相连 (参考 图 6-5-1) 。 


St 


图 6-5-1 向 量 的 加 法 运算 
。 减法 


ar (7?) 
(®) 与 by/ 的 减法 运算 为 
Gs br az 一 pz 
a—b= 网 加 网 本 (® 一 呈 


Cg by, 


az br 
a = b= 
两 个 三 维 回 量 日 与 日 的 减法 运算 为 


dr br az — bzr 
a. b. a. —b. 


即 相 同 分 量 之 间 分 别 做 减法 ， 束 是 向 量 间 的 减法 运算 。 从 图 形 来 看 ， 
a ， 等 于 一 条 从 向 量 b 的 前 端 指向 向 量 a 的 前 端的 向 量 (参考 
6-5-2) 。 


oO 


0O 
图 6-5-2 向 量 的 减法 运算 
假设 a-b=c， 可 以 得 到 
a=b+c 
可 见 构 成 向 量 的 等 式 中 也 可 以 进行 普通 的 移 项 ， 这 对 应 到 图 形 上 也 不 
难 理解 。 因 此 对 于 向 量 的 加 法 、 减 法 运算 ， 完 全 可 以 像 普通 的 等 式 那 
样 进行 等 式 的 变形 。 
常数 (标量 ) 倍 


对 二 维 向 量 ” CD a (标量 ) ， 有 


(zr Qar 
CQ 一 上 一 
ly Qay 


Ur 
dy 


同 理 ， 对 三 维 向 量 EC) i 
量 ) ， 有 


Ur Car 
Qaa=a|lay|=|aay 

a Ca. 
也 就 是 说 ， 回 量 的 常数 倍 等 于 对 向量 的 所 有 分 量 乘 以 同一 常数 。 这 也 
征 癌 量 音 数 倍 的 定义 ， 所 以 没有 办 法 再 进一步 解释 。 


和 
不 5 


p=aa+Bb 


这 样 得 到 的 向 量 p 会 呈现 出 很 多 有 趣 的 性 质 ， 例 如 ， 根 据 常 数 a 与 B 
的 值 的 不 同 ， 其 取 值 范围 也 有 所 不 同 ， 这 会 在 后 文 详细 介绍 。 


。 内 积 


(1 bs 
何谓 向 量 的 内 积 ? 例如 ， 对 于 两 个 二 维 向 量 (©) 与 (&) 来 
说 ， 它 们 的 内 积 为 


a:b=arbtt ayby 


光 看 上 面 的 等 式 可 能 无 法 明白 内 积 到 底 代 表 什 么 ， 其 实 我 们 可 以 进 一 
步 得 到 以 下 关系 。 


a:b=arbrta,by= |allb|cost 


其 中 9 是 a 与 b 的 夹 角 。 当 0 为 直角 时 cos0 为 0， 这 可 以 被 用 于 检测 
两 问 量 是 否 正 艾 ， 以 及 求 cos0 的 值 等 ， 在 游戏 开发 中 非常 方便 。 


ar br 
Qa= |ay b= |b, 
当 向 量 扩展 到 三 维 时 ， 两 个 三 维 向 量 。 \“/ 与 Ab/ 的 内 积 为 
a:b=arbrtaybyta.b,= |allblcost 


。 外 积 


{17 by 
Qa= | b= | 
所 谓 向 量 的 外 积 ， 是 指 对 于 两 个 三 维 向 量 加 ， 日 (二 
维 向 量 中 不 存在 外 积 的 定义 ) ， 有 以 下 关系 成 立 。 


yb: — a:by 
axb= | abr—arb: 
Qzby — QD 


外 积 与 内 积 不 同 ， 其 结 采 仍 为 一 个 同 量 。 不 过 上 面 这 个 等 式 与 内 积 一 
样 ， 不 容易 直接 看 到 其 作用 ， 因 此 我 们 进一步 将 其 转化 为 以 下 关系 。 


ayb: — a:by 
axb= 区 一 他 = (lallb|sin 0d)n 

arp — ayb; 
其 中 元 是 同时 与 向 量 a 及 癌 量 b 垂直 的 单位 向 量 ， 因 此 外 积 得 到 的 是 
与 两 个 问 量 同时 正 交 的 向 量 。 这 可 以 被 用 于 计算 与 某 一 物体 正 交 的 癌 
量 ， 即 物体 的 法 线 向 量 ， 也 可 以 被 用 于 判定 两 个 向 量 的 位 置 关 系 ， 
为 sin9 的 符号 (为 + 还 是 为 -) 与 6 的 符号 一 致 ， 所 以 将 外 积 的 z 分 量 
ax by -ay bx 单独 取出 来 ， 就 可 以 在 平面 内 判定 两 个 向 量 的 位 置 关系 (对 
于 向 量 a 来 说 向 量 b 在 其 左 侧 还 是 右 侧 ， 这 在 4.4 节 中 使 用 过 ) 。 


结合 律 

回 量 的 结合 律 可 以 表示 为 以 下 形式 。 

p=aa+Bb 

其 中 w 与 8 为 常数 。 通 过 更 改 w 与 5 ， 束 可 以 由 原来 的 向 量 a 与 向 量 刀 
， 得 到 各 种 各 样 的 新 间 量 。 比 如 当 w+B=1 时 , 令 B=,， 由 aw+p=1 
可 得 a=1-t ， 则 有 

p=(1-t)a+tb 

再 将 其 变形 ， 有 

p=a+t(b-a) 

向 量 p 是 以 向 量 a 的 前 端 为 起 点 ， 向 向 量 (b-a) 方 向 ( 当 t<0 时 为 反 
方向 ) 延伸 的 向 量 。 此 时 的 向 量 p ， 当 t=0 时 与 向 量 a 一任 ， 当 t=1 


时 与 向 量 b 一 致 ， 而 当 t 在 0 到 1 的 区 间 内 变化 时 ， 其 变化 轨迹 就 构成 
了 一 条 连接 向 量 a 与 向 量 b 的 向 量 (参考 图 6-5-3) 。 


十 


图 6-5-3 ”向 量 的 内 分 


人 
工 


p=(1I1-t)a+tpbp (0<t<1) 


就 称 为 向 量 的 内 分 公式 。 在 游戏 开发 中 ， 可 以 将 这 个 公式 中 的 上 解释 
为 时 间 ， 只 要 知道 位 置 a 与 位 置 bp ， 让 物体 在 两 位 置 间 运动 ， 就 可 以 
计算 出 位 置 a 与 位 置 b 之 间 所 有 点 的 位 置 ， 这 称 为 线性 补 间 ， 在 游戏 
开发 中 经 常 使 用 。 

而 对 于 回 量 的 结合 和 

p=aa+Bb 

根据 a 与 的 符号 ， 还 可 以 判定 亲 量 p 与 向量 a、b 有 什么 样 的 位 置 
关系 (在 3.4 和 中 有 用 到 ) 。 二 维 向 量 的 情况 下 ， 其 位 置 关系 如 图 6-5- 
4 所 示 。 在 游戏 中 ， 基 于 多 边 形 泻 染 的 自由 形状 的 多 角形 物体 进行 碰撞 
仿 测 时 ， 除 了 检测 物体 钙 否 碰撞 外 ， 如 果 还 想 知 道 多 边 形 的 哪个 边 没 
有 人 磁 撞 ， 使 用 上 面 的 公式 会 比较 方便 。 


图 6-5-4 二 维 向 量 中 向 量 间 位 置 关系 的 判定 
。 旋转 矩阵 


关于 向 量 上 文中 已 经 做 了 一 些 介绍 ， 向 量 可 以 通过 矩阵 对 其 进行 线性 变换 
在 数学 上 见 阵 的 应 用 范围 非常 广泛 ， 本 小 世 仅 对 二 维 回 量 进行 线性 变换 
时 所 用 到 的 一 些 矩 阵 (都 是 2 行 2 列 的 矩阵 进行 说 明 。 


用 于 二 维 回 量 线性 变换 的 甜 阵 ， 是 2 行 2 列 的 正方 形 和 矩阵 ， 形 如 
a b 
(a 


有 信用 于 一 个】 (相向 和 是 一 个 列 和 时 人 


a b Uz 

(: 人 

即将 矩阵 放 于 列 向 量 左 侧 并 相 乘 ， 相 乘 的 结果 与 变换 前 相同 ， 仍 然 是 一 个 
列 回 量 ， 具 体 为 


可 


a Db 


C d 


avz + buy 


es 


cuz + dvy 


不 过 看 完 是 不 是 仍然 有 点 换 不 痢 头 脑 呢 ? 这样 的 变换 到 底 有 什么 作用 ， 似 


乎 之 前 没有 见 过 对 应 的 实例 。 


发 必 不 可 少 的 ， 那 就 是 旋转 矩阵 ， 它 可 以 将 向 量 旋转 任意 角度 。 
E 阵 ， 无 论 是 怎样 的 长 度 和 初始 方向 的 向 量 ， 都 可 以 将 其 旋转 到 所 需要 的 


算 
角度 ， 仅 从 这 点 束 可 以 知道 矩 


那么 旋转 答 


We ee 
(参考 图 6-5-5) 。 


sing 


(—sing, cos0) 


图 6-5-5 向量 的 旋转 


a b 


ee 


Ce) 


a b cosh 


C d sing 


E 阵 具体 是 怎样 的 呢 ? 将 癌 量 旋转 6 的 旋转 矩 


COS 日 


) 和 


其 实在 线性 变换 的 矩阵 中 ， 


有 一 个 是 游戏 开 
° 通过 旋转 


E 阵 是 游戏 开发 中 必 不 可 少 的 工具 了 。 
E 隆 ， 只 需要 将 X 方 


— sing 
cost 


人 而 


(0, 1) 


AN (cosb, sing) 
| 4,0) 


] 
0 


cost 


) i 


sing 


| 


.4=Ccos0, c=sing 


—sing 


同时 ， 将 ) 则 有 


a b —sing 
cd cosg 


左边 进行 乘法 运算 ， 有 


a b 
ee 
cosg —sing 
[ 8 Cos 日 


也 就 是 说 ， or be 只 需 将 上 面 的 旋转 矩阵 放 在 向 量 左 边 
并 相 乘 ， 然 后 进行 计算 即 可 ， 如 下 所 示 。 


cos 日 —sing Uy 

(人 cost ) (®) 
Ur COSO — vsing 

Sin 十 vy COS ,) 
通过 这 种 方式 ， 无 论 向 量 加 的 初始 长 度 和 方向 如 何 ， 都 可 以 将 其 旋转 0 
oe 方便 。 想 要 从 事 游 戏 开 发 的 朋友 ， 请 务必 牢记 这 个 重要 的 旋转 拓 
嘿 。 
。 单位 矩阵 五 


除了 旋转 甜 隆 ， 在 游戏 开发 中 还 有 一 BE 其 中 之 一 就 是 单位 矩 
阵 正 。 所 谓 单位 矩阵 ， 就 是 一 个 向 量 与 其 相 乘 后 ， 仍 然 等 于 原来 的 向 量 的 


矩阵。 在 普通 的 数学 计算 中 ， 一 个 数 乘 以 1 仍然 等 于 原来 的 数 ， 而 单位 矩 
阵 束 相当 于 数字 1。 具体 来 说 ， 单 位 矩阵 是 一 个 2 行 2 列 的 矩阵 ， 形 如 


1 0 
z=( |) 


有 兴趣 的 读者 可 以 试 试 将 其 乘 以 向 量 加 ， 看 等 式 


是 否 真 的 成 立 ， 如 果 成 立 ， 就 可 以 确认 EE 乘 以 一 个 向 量 后 向 量 仍 然 保持 不 
Oo 
逆 和 矩阵 


最 后 不 能 不 提 的 是 逆 抢 阵 这 一 特殊 的 矩阵 。 逆 和 矩阵 对 应 的 是 逆 变 换 。 与 普 
通 和 矩阵 所 进行 的 变换 相反 ， 逆 变换 可 以 将 矩阵 已 经 作用 的 变换 取消 ， 而 实 
现 这 种 逆 变 换 的 矩阵 就 称 为 逆 矩 阵 。 单 看 定义 可 能 有 些 复 杂 ， 比 如 有 将 向 
量 顺 时 针 旋 转 9 的 旋转 矩阵 ， 与 之 相对 的 逆 和 矩阵 就 是 将 向 量 逆 时 针 旋 转 8 
， 因 为 顺 时 针 旋 转 后 又 逆 时 针 转 回 ， 等 于 没有 旋转 ， 这 样 就 等 于 取消 了 原 
和 窍 阵 作用 的 变换 。 

在 游戏 开发 中 ， 要 用 到 逆 变 换 的 场景 非常 多 ， 因 此 逆 甜 阵 也 非常 重要 。 
实 游 戏 开 发 中 通 泗 用 到 的 一 些 变 换 ， 包 括 3D 变换 ， 都 存在 对 应 的 逆 变 痪 
因此 也 就 有 相应 的 逆 和 矩阵 存在 。 具 体 来 说 ， 以 2D 中 2 行 2 列 的 矩阵 为 例 ， 


假设 


a b 
A4= E 


其 逆 和 矩阵 为 


_ l d —b 
a ad — bc ( a ) 


其 中 A 站 的 上 标 -1 就 表示 这 是 一 个 逆 和 矩阵，A 站 读 作 A 逆 。 


下 面 就 让 我 们 实际 使 用 这 个 公式 ， 来 试验 一 下 旋转 是 否 能 变 成 逆 时 针 旋转 
吧 。 已 知 将 2D 向 量 旋转 角度 6 的 和 矩阵 为 


cos —sing 
sing cosb 


将 其 对 应 于 上 式 的 和 矩阵 A ， 则 有 a =cos9 、b =-sin0 、c=sin96、d =cos9 ， 那 
么 其 逆 官 阵 A 工 为 


1 cosg sing 
(cos0)?2+ (sinf)? \—sing cos 


由 于 其 中 cos6 与 sing 分 别 代表 半径 为 1 的 单位 圆 上 ， 和 角度 6 所 对 应 的 x 化 
0 根据 勾 股 定理 可 知 (cos 6) + (sn6)=12=1， 代 入 上 面 的 逆 


1 cos sing cosD sing 
1 (: sing cos | 时 (: sing cos , 
又 由 于 cos (-9) = cos 6 ， 并 且 sin (-6 )= -sin 9 ， 于 是 有 

cosg sing cos{—98) —sin(—08) 
[ws COS 册 时 fe ol ) 
最 后 得 到 的 和 矩阵， 就 是 将 原 旋转 矩阵 的 0 替换 为 了 -9 ， 证 明 这 个 逆 矩 阵 确 
实 是 对 旋转 角度 9 的 逆 旋 转 。 
将 原 矩 阵 与 逆 矩 阵 相 乘 ， 会 得 到 上 一 小 节 中 出 现 过 的 单位 矩阵 E ， 具 体 过 
程 这 里 不 再 详细 介绍 。 原 理应 该 不 难 理解 ， 一 个 向 量 乘 以 单位 矩阵 后 不 会 
发 生 改 变 ， 而 送 矩 阵 正好 可 以 取消 抢 阵 产生 的 变 换 ， 因 此 逆 矩 阵 与 矩阵 相 
乘 的 效果 与 单位 盾 阵 完全 一 致 。 读者 可 以 将 矩阵 与 逆 从 阵 的 关系 ， 类 比 为 


UU. 个 数 与 其 倒数 的 关系 ， 因 为 一 个 数 乘 以 其 倒数 也 正好 等 
1 。 


6.6 ”微分 
ken Word 


变化 率 、 微 分 系数 、 极 限 、 合 成 画 数 


RANK/hard 


。 微分 


所 谓 微 分 ， 可 以 看 作 是 一 种 求 微分 系数 的 操作 。 而 微分 系数 ， 是 指 某 个 画 
数 关于 某 个 值 的 变化 率 。 这 个 概念 在 游戏 开发 中 经 常 被 用 来 考察 其 个 画 数 
变化 的 速度 。 举 个 具体 的 例子 ， 比 如 想 要 知道 一 条 直线 f(x ) = ax 的 变化 
率 ， 首 先 令 x 只 变化 Ax 时 了 (x) 的 变化 率 为 q， 则 有 


Re 了 (x) 的 变化 量 
X 的 变化 量 


Se 
和 A 


因此 f(x ) = ax 的 变化 率 ， 也 束 古 微分 常数 总 是 为 a。 对 于 一 条 直线 ， 一 服 
看 去 就 能 明白 ， 其 斜率 就 是 直线 函数 的 变化 率 。 


接 下 来 考虑 fx ) = ax +b 的 微分 系数 ， 当 x 仅 变 化 Ax 时 ,f(x ) 的 变化 率 为 


f(z + Az) — f(z) 
AT 
{alz + AAT)+b} (ar+b) 
AT 


d = 


aAr 
AT 
二 a 


虽然 增加 了 常数 b， 但 是 其 变化 率 ， 即 微分 系数 仍然 为 a。 这 可 以 理解 为 
里 然 出 发 地 点 不 同 ， 但 只 要 速度 不 变 ， 位 置 的 变化 率 也 应 该 相同 。 说 明 责 
数 即 使 加 上 一 个 常数 ， 其 微分 系数 也 不 会 变化 。 


我 们 已 经 知道 表示 直线 的 函数 fx ) = ax +b 的 微分 系数 始终 为 常数 a。 那 么 
非 直 线 ， 即 表示 曲线 的 落 数 ， 像 掀 物 线 f& )= ox +b 的 情况 义 如 何 呢 ? 在 
抛物 线 上 ， 变 化 的 速度 根据 位 置 的 不 同 而 有 所 区 别 ， 因 此 大 致 可 以 猜想 

到 ，f (x ) 的 变化 率 应 该 是 一 个 关于 x 的 函数 。 让 我 们 实际 计算 一 下 变化 率 d 
吧 。 


FIzZ+Az) 一 Fr) 
AT 
afzr 二 Ar) 一 az2 
加 Ar 
ar2 + 2ar(Ar) + al(Ar): — ar’ 
加 AT 
一 2ar7 十 alAr) 


可 以 看 到 fx ) 的 变化 率 会 同时 受到 x 与 Ax 双方 的 影响 。 对 于 抛物 线 f(x )= 


ax 2 ，X 改 变 时 变化 率 会 改变 (图 6-6-1 左 ) ， 同 时 ， 当 x 的 变化 量 Ax 改 
变 时 ， 变 化 率 也 会 改变 (图 6-6-1 右 ) 。 


d = 


xX 改 变 时 AX 改 变 时 


图 6-6-1 抛物 线 f (x ) = ax? 的 变化 率 


我 们 已 经 知道 微分 系数 的 定义 是 f(x ) 关于 x 的 变化 率 。 对 于 一 个 特定 的 x 
Wi 
个 对 应 该 时 刻 的 速度 。 但 是 变化 率 的 本 质 是 x 的 变化 量 ， 如 果 我 们 只 考虑 某 
个 特定 的 x ， 当 x 的 变化 量 减 小 为 0 时 ， 变 化 率 也 就 无 从 得 知 了 。 为 了 维 
持 x 的 变化 量 始终 有 值 ， 且 让 每 个 x 都 能 有 自己 的 微分 系数 存在 ， 我 们 需 
要 执行 一 个 特殊 操作 ， 就 是 让 x 的 变化 量 Ax 无 限 小 。 这 个 操作 表示 为 记号 
可 以 写作 limaz-oO ， 称 为 极限 。 对 变化 率 取 极限 得 到 的 微分 系数 写作 耻 (x 
)， 而 通过 这 种 方式 求 微分 系数 的 过 程 就 叫 作 微分 。 下 面 用 数学 符号 来 表示 

对 抛物 线 fx ) = ax 2 进行 微分 的 过 程 。 


flzt+ Az)— flz) 
Ar 
= lim il2ar 二 alAzr)) 
AI 一 0 


‘(7T) = lim 
f ) Arz 一 0 


一 207 


人 te 而 要 求 菜 个 点 的 变化 率 
时 ， 可 以 画 出 通过 该 点 并 与 曲线 相 切 的 直线 ， 这 条 直线 的 斜率 就 是 该 点 的 
变化 率 ， 可 以 很 明显 地 看 出 ， x 越 大 切线 的 射 率 也 是 大 (参考 图 6.6-1) 。 


dd 
表示 微分 系数 的 符号 ， 除了 Fx) 外 ， 还 可 以 写成 下 1， 另外 ， 当 y= 了 (x 
) 时 ， 还 可 以 本 作 。 这 种 写法 可 以 很 明确 地 表示 正在 对 哪 一 个 变量 进行 
微分 。 比 如 也 就 表示 对 y 进行 关于 x 的 微分 。 


在 上 面 的 例子 中 ， 我 们 分 别 对 直线 (x 的 一 次 方 ) 、 抛 物 线 (x 的 二 次 方 ) 
求 了 微分 系数 。 那么 对 于 更 高 次 数 如 x 的 三 次 万 、x 的 四 次 方 ) 该 如 何 处 


理 呢 ? 在 游戏 开发 中 ， 比 如 当 需 


在 任意 坐标 放置 多 个 点 并 作出 通过 这 些 


点 的 补 间 曲 线 时 ， 有 时 就 会 用 到 这 种 高 次 数 的 微分 。 接 下 来 为 了 更 好 地 理 


解 ， 我 们 分 别 对 x 的 一 次 方 、 二 次 方 、 三 次 方 等 进行 微分 。 


d {z+ AT)—17 
—{(r)= lim 
dz Ar—0 AT 
人 了 
一 lim 一 一 
Ar—0 AT 
二 1 
d (22) 1 (tT+ AzT)}2—z2 
dz 0 Ad 必 工 
1 T2+27(AT) + (AT)2— 2 
加 Alo ArT 


_ jm 2z(Az) ，(Az) 
AS0 Ar AT 


= lim (2z 十 Arzr) 
AI—0 


=27 
d ,5 (t+ A 
一 人 7T) = lim 一 一 
dr Ar—0 A 
+ 3 (ArT)+37ArT) + (A 
二 1 
AI—0 AT 
3zr2f(Az) 3zfAz)2 (Ar) 
= lim 一 十 
Ar 一 0 AT AT AT 


二 lim {37" 十 3TAI 十 (Az)2} 
= 372 
. 〈 以 下 省 略 ) .…. 
这 里 不 再 一 一 列举 更 高 次 方 的 情况 ， 一 般 来 说 微分 可 以 表示 为 


下 面 列举 一 些 与 微分 相关 的 各 种 计算 的 公式 。 
加 法 :减法 

一 般 来 说 

(fl) +9(7)) = flo) + Egle) 


dr 


即将 函数 相 加 后 进行 微分 ， 等 于 将 函数 分 别 微分 后 相 加 。 比 如 


d ，? ;Ws d 
et Pn dz 本 
一 2 - 1 


同 理 ， 对 于 减法 有 

+ eR d | d | 
—(f(lr)—g(7)) = —f(7)— —gl(7) 
dz dz dz 
常数 倍 

一 般 来 说 ， 对 于 常数 a 有 
pe = Pe 

dz dz 


即 对 函数 的 a 倍 进行 微分 ， 等 于 微分 后 的 画 数 乘 以 o 倍 。 这 可 以 再 与 加 法 
运算 组 合 ， 比 如 


Ee + br + cz) 一 (aa 一 (p22) 一 a 
dz dz dz dz 

d ， d d 
= ) 二 D 一 (7 2) + c 一 (z) 


dr dz dz 


< » 
一 3azr ++2br+i+e 


对 于 如 三 角 函 数 这 样 不 含 多 次 方 项 的 函数 ， 考 虑 其 微分 的 情况 ， 有 


d sin(T + AT) — sinz 
一 (sin T) 三 dim 一 一 一 一 一 一 -一 一 一 一 


dz Ar—0 Ar 
然后 运用 三 角 函 数 的 积 化 和 差 公 式 


, . 本 十 ， A—B 
sinA—sinB=2cos sin 
4 日 
可 得 
和 2cos HAF sin 学 
—lsinz) = lim 
dz Az 一 0 让 


将 lim 部 分 的 分 数 的 分 子 分 母 同 除 以 2， 有 


d 27++AT sin 年 
一 (sin T= lim | cos 一 一 一 一 KR 
dr A 2 < 工 


T+ & 了 


对 于 前 面 的 cos 部 分 ， 有 


27 十 AT 2 
lim | cos 一 CO8 一 = cosT 
Arzr 一 0 2 2 


EA 


EA 


对 于 后 面 的 sn 部 分 ， 因 为 有 公式 


AT 
2 


(这 个 公式 可 以 使 用 通 近 法 进行 证 明 ， 此 处 省 略 ) ， 令 5 “*， 则 有 


三 | 日 

最 后 可 得 

Fr ee 2r+Ar sin 竺 
—lsinz) = lim | cos -一 
dz AI 一 0 2 -一 


一 COS 工 


这 样 就 完成 了 对 sinx 的 微分 。 对 于 cos 可 以 使 用 同样 的 方法 ， 最 终 得 到 


d | 
-一 (cosZTj 一 一 SinTZ 
dz 


将 上 面 得 到 的 微分 公式 整理 如 下 。 


d ， 
| 
dz (z) 
d 了 
ee 
二 fe 
d,s 
de ) 37 
二 (mm )= nz"™! 
Na 
—!{sinz) 一 COST 
dz 
d 
=—{cos7T) = —sinz 
dr 


除了 上 面 的 公式 外 ， 还 需要 知道 如 果 微 分 不 含 变量 ， 即 仅 对 常数 进行 微分 
外 语 会 信和 0 。 这 些 公 式 基 本 上 和 窗 这 了 游戏 开发 中 所 涉及 的 有 关 微 分 的 知识 
要 点 ， 和 硕 望 读者 可 以 记 住 这 些 结论 。 


。 合成 画 数 的 微分 


最 后 介绍 一 点 关于 合成 函数 的 微分 知识 。 在 游戏 开发 中 可 能 会 遇 到 sin(wt) 

或 cos(ot ) 这 样 的 等 式 (w 为 常数 ，t 为 时 间 ) 并 需要 对 上 进行 微分 的 情 

六 此 时 与 t 相 乘 的 常数 @ 就 显得 比较 碍 事 ， 因 为 它 导致 三 角 函 数 的 微分 
公式 无 法 直接 使 用 。 当 然 可 以 改 用 求 极限 的 lim 等 式 ， 但 是 实际 操作 起 来 需 

要 一 步 步 计算 仍然 很 麻烦 ， 所 以 我 们 还 是 希望 能 直接 使 用 已 有 的 公式 。 

值得 庆幸 的 是 ， 我 们 还 有 合成 函数 的 微分 这 一 便利 的 工具 ， 接 下 来 就 使 用 

它 对 sin(@t ) 微分 试 试 吧 。 首 先 令 y =sin(ot )、x=wt ， 可 得 


1 一 Sin 
T=iwt 
dy 


i 
这 样 一 来 只 要 求 得 走 ， 就 等 于 求 出 了 下  。 但 是 上 面 的 等 式 中 y 被 
表示 为 了 关于 x 的 画 数 ， 不 能 直接 对 y 求 + 的 积分 。 而 此 时 就 轮 到 合成 画 数 
的 微分 出 场 了 。 


dy dy dz 


dt dr dt 


这 个 等 式 如 果 仅仅 作为 分 数 的 话 当 然 是 成 立 的 ， 但 要 注意 它 不 是 分 数 而 是 
微分 。 因 此 这 个 等 式 的 舍 义 是 : 对 y 求 t 的 微分 所 得 的 结果 ， 等 于 对 y 求 x 
的 微分 的 结 采 乘 以 对 x 求 t 的 微分 的 结果 。 实 际 来 试 试看 吧 。 

dy ds 

EE 一 en T) = coOS7 

dz d, 

dd dt 


因此 有 


dd ， 、 1 dy dz 
— (sin(wt)) = SY = 二 一 COST .上 一 上 cosT 
dt 


dt dr dt 
再 将 x =wt 代 入 cos， 最 后 得 到 
We ; 
—|sinliwt) ) 二 Ww coslcotj 
dt 


同 理 ， 还 可 以 得 到 


| st 
一 fcosflwij = —w sinlwt) 
dt 


上 面 的 计算 在 1.6 站 中 有 使 用 。 通 过 上 面 的 说 明 ， 其 实 可 以 将 合成 函数 的 微 
分 不 太 严 谍 地 看 作 “ 对 函数 中 义 包 合 男 一 层 函 数 的 等 式 进行 微分 ， 可 以 将 其 
S000 
忆 。 

下 面 再 举 一 个 应 用 合成 画 数 的 微分 的 例 和 于， 对 等 式 

y 二 (at 十 b)? 

如 何 进行 微分 呢 ? 此 时 先 将 等 式 展开 得 到 

Y= ast? + 2abt+b? 

虽然 计算 


dy 
dt 


nD 
= 2a’t+ 2ab 


也 可 以 求解 ， 但 是 使 用 合成 函数 的 微分 会 更 加 简单 ， 令 
T=at+b 
则 有 


] d lr | 
CY 一 TY. = 2(at+b}):a = 2a2 + 2ab 
dt dr dt 


展开 后 与 采用 普通 微分 得 到 的 结果 一 样 。 这 种 方法 可 以 回避 等 式 中 复杂 的 
展开 ， 免 去 不 少 麻 烦 ， 布 望 读 者 朋友 善 加 使 用 。 


6.7 ”级 数 与 积分 


Ke ^ Word 
数列 、 西 格 玛 、 原 函数 、 不 定 积 分 、 积 分 常数 
RANK/very hard 
。 级 数 


所 谓 级 数 ， 就 是 将 一 个 数列 的 每 一 项 加 起 来 得 到 的 结果 。 而 这 里 所 说 的 数 
列 ， 是 按照 一 定 规则 排列 的 一 系列 数字 。 比 如 下 面 束 是 一 个 数列 。 


aq1=1, a,=2, qs=3, ds4=4, qs=5, ...... 


而 下 面 同样 也 是 一 个 数列 。 


对 于 开发 人 员 来 说 ， 将 数列 对 应 为 数组 变量 可 能 会 比较 容易 理解 。 但 是 与 
程序 中 的 数组 变量 不 同 ， 数 学 中 的 数列 大 多 都 可 以 将 内 容 (数字 ) 以 算式 
的 形式 表示 。 比 如 上 面 的 


dq1=1, aqa>=2， ds3=3, ds4=4, qs=5, ...... 
这 一 数列 可 以 表示 为 

dn=n 

而 

aq1=1, a,=2, qs3=4, qs4=8, qs=16, ...... 
这 一 数列 则 可 以 表示 为 

an =2"-1 


由 于 级 数 是 将 某 个 数列 的 一 个 编号 到 男 一 个 编号 之 间 的 数字 全 部 相 加 ， 因 
此 级 数 也 可 以 用 符号 表示 为 


n 


> Oi 


?一 7 


这 表示 将 数列 的 第 m 个 数字 到 第 n 个 数字 全 部 相 加 所 得 到 的 数 。 读 作 “ 西 格 
玛 a 从 m 到 n”。 举 个 简单 的 例子 。 


》; 
i=1 


这 种 情况 下 ， 由 于 y 内 只 有 常数 1， 不 包含 每 次 变化 的 i， 因 此 表示 
1+1+1+1+1+1， 即 1 相 加 5 > 


i=1 


下 面 举 一 个 稍微 复 洒 的 例子 。 


es | 
Un 
污 
泛 


pC 


此 时 a; =1 ， 也 就 是 说 a We 站 夺 下 二 二 区 ee 然后 将 第 1 
个 到 第 5 个 数字 全 部 加 起 来 ， 即 将 从 1 到 5 的 数 全 部 相 加 ， 
1+2+3+4+5=15， 所 以 


Di 15 

i=] 

那么 如 采 上 限 不 为 5， 而 是 做 从 1 到 n 的 加 法 ， 即 
en 


一 ] 


的 值 为 多 少 呢 ? 虽然 我 们 很 从 易 和 知道 n=1 时 为 1，n =2 时 1+2=3，n =3 
时 1+2+3=6......, 但 是 一 直 计 算 到 n 是 不 是 有 点 难 呢 。 其 实 对 于 1~ 的 加 
法 ， 只 要 增加 一 个 倒序 的 数列 就 可 以 很 容易 地 求解 。 。 假设 


n 
I= > 1 

i=1 
洗 


T= 二 1 十 2 十 3 十 … 十 (nn 一 1) 十 n 


T= 二 nn 二 +{n 一 1 十 {nn 一 2) 十 :… 十 2 十 1 
然后 将 上 下 两 个 式 子 相 对 应 的 项 相 加 ， 有 
2x=(n+1)+n+1)+n+1)+...+(n+1)+(n+1) 


对 原 数 列 加 上 一 个 倒序 的 数列 后 ， 囊 变 成 相同 数字 的 加 法 了 。 由 于 相 加 的 
数 一 共 有 n 个 ， 因 此 右边 有 n 个 (n +1)， 即 


27 = nlnt1) 


1 ， 
.I 工 二 -n(n 十 1) 
2 


所 以 


; Le 
> 1 二 一 n{(n 十 1) 
2 


i=1 


下 面 将 n=5 代入 试 试 。 


el 本 

i 二 二 "5.:(5 十 1)}=15 
i=] 2 
与 之 前 的 计算 结果 一 致 。 这 种 对 1~n 的 级 数 求解 的 方法 ， 在 计算 其 他 级 数 
时 一 般 也 能 适用 ， 最 好 可 以 记 住 。 


不 从 1 开始 的 级 数 
接 下 来 让 我 们 思考 如 果 数 列 不 从 1 开始 会 怎样 。 比 如 
> 


t= 


这 种 情况 ， 表 示 从 m 到 n 的 整数 全 部 相 加 ， 比 如 当 m =3、n =7 时， 有 
3+4+5+6+7=25。 那 么 级 数 用 m 与 n 表示 时 要 如 何 计算 呢 ? 与 之 前 的 从 1 开 
始 的 级 数 相 同 ， 我 们 对 其 加 上 一 个 逆序 的 级 数 。 假 设 


一 到 十 (人 十 二 十 (十 2 十 … 十 (人 一 二 十 画 


Z 一 ?十 (7 一 1 十 (了 一 2) 十 十 (十 1 十 7 
然后 将 上 下 两 式 相 加 ， 有 
2x=(m+n)+(m+n)+(m+n)t+...+(m+n)+(m+n) 


相 加 的 数 从 m ~n 一 共有 (n -m+1) 个 。 比 如 车 m=3、n=7， 则 一 共有 (7- 
3+1)=5 个 数字 。 即 等 式 右边 共有 (na -m +1) 个 (m+n )， 因 此 


2r = (m+n}j(n—-m+t1) 


1 
… 工 一 一 (7 十 了 有 一 也 十] 二) 
5 , 


最 终 得 到 


| 1 、 
> 1 一 一 (7 十 7 人 7 一 7 十 二 |) 
有 


i=m 


让 我 们 代入 m =3、n =7 验证 一 下 。 


与 之 前 计算 的 结 采 一 致 。 有 兴趣 的 读者 可 以 目 行 验 证 一 下 m =1 时 结 采 与 之 
前 i 从 1 开始 的 数列 古 否 一 致 。 


复杂 算式 的 级 数 


Rd 个 如 以 便 使 用 公 直 的 
? 


>》 (ai 十 有 

i=m (a 3 b 为 常数 ) 
这 个 算式 ， 可 以 将 其 分 割 为 
和 和 


t= ?一 7 t= 


像 这 样 ， 将 常数 移 到 > 的 外 面 ， 束 可 以 分 割 为 多 个 了。 如 采 觉 得 不 好 理 
解 ， 可 以 类 比 一 下 加 法 中 乘 以 共同 的 系数 时 ， 可 以 移 与 系数 相 乘 再 相 加 ， 
同时 更 改 加 法 的 顺序 也 不 会 影响 结果 (在 1.4 节 中 使 用 过 ) 。 


积分 


上 面 已 经 介绍 了 级 数 相关 的 知识 。 积 分 与 级 数 有 相似 的 部 分 ， 从 形式 上 来 
看 是 微分 的 逆 运 算 ， 比 如 在 求 图 形 的 面积 ， 或 者 由 加 速度 计算 速度 、 由 束 
度 计算 位 置 等 操作 时 会 使 用 到 。 对 位 置 关于 时 间 微分 就 会 得 到 速度 ， 而 当 
速度 已 知 要 求 位 置 时 ， 我 们 其 实 是 在 计算 被 微分 前 原来 的 函数 是 什么 ， 也 
就 是 在 求 原 函数 。 求 原 函 数 的 操作 就 是 积分 。 比 如 


d 


一 (7 2) 一 2 
dz 


a 
。 因为 在 微分 过 程 中 会 将 第 数 消去 ， 假 设 C 为 第 数 ， 那 么 


2x 的 积分 等 于 x?+C 才 是 正确 的 。 积 分 可 以 用 以 下 符号 表示 。 


/2s 一 2 二 C 


像 这 样 结果 中 含有 不 确定 常数 (上 式 中 为 C ) 的 积分 称 为 不 定 积分 ，C 称 
为 积分 常数 。 还 是 以 速度 与 位 置 的 关系 为 例 ， 令 时 间 为 14， 那么 以 2t 的 速 
度 〈 即 随时 间 加 速 ) 运动 的 物体 ， 到 达 的 位 置 就 为 tf?+C 。 当 t=0 时 位 置 
为 C， 这 里 的 积分 常数 C 就 代表 了 物体 的 初始 位 置 。 同 样 ， 通 过 对 加 速度 
积分 来 求 速度 时 ， 积 分 常数 就 表示 初速 度 (参考 1.4 节 及 1.7 节 ) 。 


接 下 来 列举 一 些 积 分 相关 的 公式 。 首 先 根据 对 x" 进行 微分 的 一 般 形式 可 得 


d / zn+l n 
一 | 一 一 | 一 
dr\n+l 


对 等 式 两 边 进行 积分 ， 有 


7 十 ] 
J 
: nn 十 1 


依次 关 推 即 可 。 
而 与 微分 相同 ， 积 分 的 情况 下 也 有 以 下 公式 成 立 。 
。 加 法 :减法 

一 般 有 


/oo 十 gzjjdz = /rodz 十 fs Tdr 


即 函 数 相 加 后 进行 积分 ， 等 于 函数 分 别 积分 后 再 相 加 。 比如 


/加 十 工 十 1}dz = | eur 十 / ra 十 | au 


过 (请 注意 x0= 1) 


注意 结果 中 将 三 部 分 得 到 的 积分 常数 整合 为 一 个 了 。 如 采 对 此 理解 有 
困难 的 话 ， 可 以 将 得 到 的 结果 进行 微分 看 能 否 还 原 回 去 。 


同 理 ， 对 于 减法 有 


flz) — glz))dr = fr T)dr 一 [sar 


。 常数 倍 
一 般 来 说 对 于 常数 a 有 


jw (zj)jdz =a fr Tjdr 


即 对 函数 的 a 倍 进行 积分 ， 等 于 对 画 数 积分 后 乘 以 a 倍 。 将 其 与 加 法 


运算 组 合 ， 则 有 


| 十 pz 二 cjdrzr 一 fen’ }dz 十 ft }dz 十 f esar 
a =a /2 0 f #ar 


az3 br 


3 2 


与 微分 不 同 的 古 ， 积分 并 不 是 一 定 可 以 进行 的 。 也 束 是 说 ， 对 一 个 画 
数 进行 积分 时 ， 并 不 能 保证 一 定 可 以 得 到 一 个 已 知 的 函数 。 因 此 在 用 
计算 机 进行 积分 计算 时 ， 一 般 都 不 是 为 了 进行 非常 严密 的 计算 大 多 
都 是 在 允许 一 定 程 度 的 误差 的 基础 上 通过 数值 计算 求解 ， 特 别 是 在 游 
戏 开 发 中 尤其 ， 几 乎 完全 依赖 数值 计算 。 读 者 朋友 如 果 遇 到 根据 速度 
求 位 置 等 必须 要 用 到 积分 的 情况 ， 应 当 首 先 考 虑 能 否 容 及 数值 计算 的 
:8 是否 真 的 需要 严密 的 求解 等 ， 然 后 再 根据 实际 情况 选择 解决 方 
? 


附录 示例 程序 的 编译 及 运行 方法 
基于 Visual Studio 2013 、Visual Studio 
2012 、Visual Studio 2010 


本 小 节 将 介绍 基于 Visual Studio 编译 及 运行 本 书 示例 代码 的 方法 。 本 书 的 示例 
程序 中 ， 除 了 数学 、 物 理学 的 理论 知识 的 实践 之 外 ， 还 用 到 了 DirectX 11。 因 
此 ， 为 了 编译 本 书 的 示例 代码 ， 需 要 安装 Visual Studio 以 及 DirectX 11 SDK 


(Software Development Kit) 。 请 注意 我 们 需要 的 是 SDK 版 本 ， 而 不 是 一 般 玩 
游戏 时 预 装 的 Runtime 版 本 ， 仪 安装 Runtime 版 本 将 无 法 完成 编译 。 


DirectX 11 SDK 可 从 以 下 网 址 下载， 到 目前 为 止 (2014 年 9 月 ) ， 最 新 版 本 为 
9.29.1962， 文 件 大 小 为 571.7 MB 。 


。 Microsoft Download Center 
= http:/www.microsoft.com/en-us/download/details.aspx?id=6812 


POINT 如果 只 是 运行 示例 程序 的 可 执行 文件 (exe 文件) 的 话 ， 仅 安装 
DirectX 11 的 Runtime 版 本 就 可 以 了 。 


操作 步骤 

首先 需要 新 建 项 目 ， 类 型 是 基于 C++ 的 Win32 项 目 ， 具 体操 作 方法 如 下 。 
1. 在 Visual Studio 的 “文件 ”菜单 中 选择 “新 建 ” “项 目 ”。 

2. 在 “新 建 项 目 ” 对 话 框 中 ， 在 左 侧 分 类 中 找到 “已 安装 ” ~“ 模板” ~ “Visual 


C++ 一 “Win32”， 选 中 后 在 中 间 的 列表 中 选择 *Wwin32 项 目 ”， 同 时 可 以 在 下 方 
的 “名 称 ” 中 填 入 项 目 名 称 ， 在 “位 置 ? 中 填 入 项 目 代码 的 保存 位 置 ， 最 后 点 击 “ 确 


认 ” 按 钮 。 


,NET Framework 4.5 。” 。 捧 序 依据 : 财 认 值 


天 wona: pwssmer 


Visual Besic 

b Visual C# 

4 Visual C++ 
ATL 
CIR 


MFC 


b Visual F# 
SQL Server 

b JavaScript 
Python 

b TypeScript 

b 其 他 项 目 类 型 
建 增 丁目 

》 联机 


名 称 (N): 
位 置 (U: CANUsersWjloVince\Documents\Visual Studio 2013\Projects 


姬 决 方案 名 称 (M}: Win32Project1 


3. 在 弹出 的 “Win32 应 用 程序 向 导 ? 对 话 框 中 ， 点 击 左 侧 的 “应 用 程序 设置 *， 然 后 
勾 选 “附加 项 目 * 下 的 “ 空 项 目 ”， 最 后 点 击 “ 完 成 "按钮 。 


应 用 程序 类 型 : 添加 公共 头 文件 以 用 于 : 
园 Yindows 应 用 程序 目 ) JATL(A) 
〇 控制 台 应 用 程序 (0) 


OILO) 


〇 静态 库 G) 


这 样 就 创建 出 了 项 目 文件 夹 。 接 下 来 就 需要 让 项 目 识 别 DirectX 的 包含 目录 及 库 
目录 ， 具 体操 作 如 下 。 


4. 在 Visual Studio 的 “项 目 ” 菜 单 中 选择 “属性 ”。 


5. 在 弹出 的 项 目 " 属 性 页 对话 框 中 ， 点 击 碟 侧 的 “配置 属性 ”一 “VC++ 目 孙 ”， 选 
目录 ”， 这 时 在 最 右 端 会 出 现 w， 点 击 该 图 标 后 会 出 现 “ 编 辑 ” 选 项 ， 氮 
‘eZ 清 ” 可 


S(WindowsSDK_Metadatapath): 
SCVC_Sourcepath); 
S$S(VC_IncludePath);$(WindowsSDK_IncludePath);$(MSI 


包含 目录 
生成 VC+ + 项 目 期 间 ,搜索 包 会 文件 时 使 用 的 路 径 。 与 环境 变量 INCLUDE 相对 应 


6. 在 弹出 的 “包含 目录 ”对 话 框 中 ， 点 击 第 一 行 第 一 个 图 标 会 出 现 输入 框 ， 在 输 
入 框 中 输入 $(DXSDK_DIR)\Include， 点 击 “ 确 定 ” 按 钮 。 


$(VC IncludePath) 
$(WindowsSDK IncludePath) 


7. 返回 “属性 页 ”对 话 杠 ， 可 以 看 到 “包含 目录 ”这 一 栏 已 经 显示 为 
“$CDXSDK_DIR)\Include:$(IncludePath)” °。 


$(VC_LbraryPath_x86);$(WindowsSDK_LibraryPath_x8/ 
S$S(WindowsSDK_MetadataPath); 
S(VC_Sourcepath); 

$(VC IncludepathjS(WindowsSDK Incudepath)j:S(MSI 


包含 目录 
生成 VC+ + 项 目 期 间 ,搜索 包含 文 件 时 使 用 的 路 径 。 与 环境 变量 INCLUDE 相对 应 。 


Ra reg 

[党 规 ] 

可 执行 文件 目录 S(VC_Executablepath_x86);$(WindowsSDK_Executable 

包含 目录 S(DXSDK_DIR)Include:S(IncludePath) 
引用 目录 $(VC_ReferencesPath_x86); 

ibraryPath_x86);$(WindowsSDK_LibraryPath_x86)| | 

[Sea 


S$S(VC_Includepath):$(WindowsSDK_Includepath):S(MSI 


生成 VC+ + 项 目 期 间 ,搜索 库 文件 时 使 用 的 路 径 。 与 环境 变量 LIB 相对 应 。 


9. 在 弹出 的 “ 库 目 录 ” 对 话 框 中 ， 点 击 第 一 行 第 一 个 图 标 会 出 现 输入 框 ， 在 输入 
框 中 输入 $(DXSDK_DIR)Libx86， 点 击 “ 确 定 ” 按 钮 。 


继承 的 值 : 


$(VC_LibraryPath_x86) 
$(WindowsSDK_LibraryPath_x86) 


从 父 级 或 项 目 默认 设置 涟 承 (1) 


10. 返回 “属性 页 ”对 话 杠 ， 可 以 看 到 “ 库 目 录 ” 这 一 栏 已 经 显示 为 
了 “$C(DXSDK_DIR)Libwx86;$(LibraryPath)”， 确认 后 点 击 “ 确 定 ” 按 钮 。 


配置 (CO): ”| 活动 (Debug) 了 | 平台 (P): “| 活动 (Win32) 了 | | 配置 管理 器 (O)… 
》 通用 属性 “| | 4 常规 | 
4 配置 属性 可 执行 文件 目录 S$(VC_ ExecutablePath_x86);$(WindowsSDK_Executable, 
包含 目录 


SVC Se 
S{(VC IncludePath);$(WindowsSDK iIncludePath);$(MSIE 


库 目录 
生成 VC++ 项 目 期 间 ,搜索 库 文件 时 使 用 的 路 径 。 与 环境 变量 LI8 柜 对 应 ， 


这 样 一 来 ， 项 目 就 可 以 识别 DirectX 所 必需 的 一 些 目 录 了 。 接 下 来 需要 向 项 目 中 
添加 代码 文件 并 编译 ， 具 体操 作 如 下 。 


11. 找到 项 目 所 在 文件 夹 (比如 Test 项 目 所 对 应 的 就 是 Test.vcxproj 文件 所 在 的 
文件 夹 ) ， 将 想 要 编译 的 源 代码 文件 (如 Movement 1 1.cpp 等 ) 、 着 色 器 文件 
(Basic_2D.fx) 、 图 片 素材 等 必需 的 文件 复制 进去 。 


12. 在 Visual Studio 中 找到 “解决 方案 资源 管理 器 ” (如果 没 有 找到 可 以 通 人 
的 “视图 ”一 “解决 方案 资源 管理 器 ”开启 ) ， 在 “ 源 文件 ”选项 上 点 击 右 键 ， 选 

择 < 添 加 ”-,“ 现 有 项 "， 然 后 选择 想 要 编译 的 源 代码 (注意 ， 此 处 只 需 入 和 cpp 代 
码 即 可 ， 无 需 添加 .多 文件 ) ， 并 点 击 “ 添 加 ”按钮 。 


13. 在 “解决 方案 资源 管理 器 * 的 “ 源 文件 "中 ， 能 看 到 想 要 编译 的 源 代码 文件 被 添 
加 了 进来 ， 双 击 该 文件 就 可 以 打开 。 


,I Win32Projectl - Microsoft Visual Studio( 管 理 员 ) 站” 售 注 启动 (Cui+Q PAP- © x 

文 # 人 篇 各 (日 祝 汉 (VvV) 到 目 () 生成 (8) 请 汇 |D) 国 久 (M) 工具 (TT 汉江 ($) 体系 结构 (C) 分 析 (N) 。 密 口 (W) 大 凤 (H) 徐 洲 ~ 洲 
@ - 有 -各国 玉 -0 - 本 地 Windows 油 江 器 - O - Debvg - Win32 - | 厌 .5 加 时 中 加 

要 解决 方案 资源 管理 经 Hx 

四 ee "| “(全 已 部属) = 各 ©-# 和 pl- 

1 [yp ea + 省 楷 奶 天 方 守 资 注 辕 再 交 (C Pp: 

虹 % Cr 周 韦 夫 方 被“Win32Project1”(1 个 项目 ) 

fT ee ee % Win32Projectl 

号 说 关 文 件 


14. 点 击 Visual Studio 上 方 的 本 地 Windows 调试 器 。 


pg Win32Projecti - Microsok Visual Studio( 管 理 员 中 ”全 寻 P=- © x 
文 煌 (RP 。 坊 狠 (5) 。 视 澡 (V) ”项目 (P) ”生成 (68)” 涯 壹 (D) 国人 (M) 工 体系 结构 (C) 分 煌 (N) 。 童 D(W) 。 相反 你 章 - 于 
© - B -co 品 由 9- > 本 地 Windows 调试 啤 - 淹 :名 中 


15. 这 时 Visual Studio 会 开始 编译 ， 编 译 成 功 后 将 自动 运行 示例 程序 。 


/= 
看 完了 
如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 
如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com ° 
在 这 里 可 以 找到 我 们 : 
微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 


。 微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 
。 微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 


微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精 彩 人 生 
微 信 图 灵 教 育 : turingbooks 
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